// react
import React, { useEffect } from "react";
// third-party
import { useForm } from "react-hook-form";
// application
import { IPayment } from "~/admin/interfaces/payment";

interface Props {
  payment: IPayment | null;
  handleCreatePaymentApi: (data: IPayment) => void;
  onCancel: () => void;
}

export const PaymentForm = ({ payment, handleCreatePaymentApi, onCancel }: Props) => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<IPayment>({
    defaultValues: {
      name: "",
      image_url: "",
      url: "",
    },
  });

  useEffect(() => {
    reset(
      payment
        ? {
            name: payment.name,
            image_url: payment.image_url,
            url: payment.url,
          }
        : { name: "", image_url: "", url: "" },
    );
  }, [payment, reset]);

  const onSubmit = (data: IPayment) => {
    handleCreatePaymentApi({
      ...data,
      ...(payment?.paymentID ? { paymentID: payment.paymentID } : {}),
    });
  };

  return (
    <div className="card">
      <div className="card-header">
        <h3>{payment?.paymentID ? "Editar método de envío" : "Nuevo método de envío"}</h3>
      </div>
      <div className="card-body">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="row">
            <div className="col-md-12">
              <div className="form-group">
                <label>Título *</label>
                <input
                  type="text"
                  placeholder="Nombre del método de envío"
                  className={`form-control ${errors.name ? "is-invalid" : ""}`}
                  {...register("name", { required: "Requerido" })}
                />
                {errors.name && <div className="invalid-feedback">{errors.name.message}</div>}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>URL de la imagen *</label>
                <input
                  type="text"
                  placeholder="URL de la imagen"
                  className={`form-control ${errors.image_url ? "is-invalid" : ""}`}
                  {...register("image_url", { required: "Requerido" })}
                />
                {errors.image_url && (
                  <div className="invalid-feedback">{errors.image_url.message}</div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>URL *</label>
                <input
                  type="text"
                  placeholder="Enlace o página relacionada"
                  className={`form-control ${errors.url ? "is-invalid" : ""}`}
                  {...register("url", { required: "Requerido" })}
                />
                {errors.url && <div className="invalid-feedback">{errors.url.message}</div>}
              </div>
            </div>
          </div>
          <div className="form-actions">
            <button type="submit" className="btn btn-primary mr-2">
              <i className="fas fa-save" /> {payment?.paymentID ? "Actualizar" : "Crear"}
            </button>
            <button type="button" className="btn btn-secondary" onClick={onCancel}>
              <i className="fas fa-times" /> Cancelar
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};