import React from "react";
import { useForm, router } from "@inertiajs/react";
import { X } from "lucide-react";

import styles from "./payment-method.module.scss";

interface PaymentMethodForm {
  method: string;
  type: string;
  isEnabled: boolean;
  address: string;
  charges: number | "";
}

interface PaymentMethodModalProps {
  closeModal: () => void;
  type: "add" | "update";
  method?: Partial<PaymentMethodForm> & {
    id?: number;
  };
}

const PaymentMethodModal: React.FC<
  PaymentMethodModalProps
> = ({
  closeModal,
  type,
  method,
}) => {
  const {
    data,
    setData,
    post,
    put,
    processing,
    reset,
    errors,
  } = useForm<PaymentMethodForm>({
    method:
      method?.method ?? "",

    type:
      method?.type ?? "",

    isEnabled:
      method?.isEnabled ?? true,

    address:
      method?.address ?? "",

    charges:
      method?.charges ?? "",
  });

  const handleSubmit = (
    e: React.FormEvent<HTMLFormElement>
  ) => {
    e.preventDefault();

    const onSuccess = () => {
      reset();

      closeModal();

      router.reload({
        only: ["flash"],
      });
    };

    if (type === "add") {
      post(
        route(
          "payments.store"
        ),
        {
          onSuccess,
        }
      );

      return;
    }

    if (
      type === "update" &&
      method?.id
    ) {
      put(
        route(
          "payments.update",
          { id: method.id }
        ),
        {
          onSuccess,
        }
      );
    }
  };

  return (
    <div
      className={
        styles.modalOverlay
      }
    >
      <div
        className={
          styles.modalContent
        }
      >
        <button
          onClick={
            closeModal
          }
          className={
            styles.closeBtn
          }
        >
          <X size={18} />
        </button>

        <div
          className={
            styles.header
          }
        >
          <span
            className={
              styles.helper
            }
          >
            {type}
          </span>

          <h2>
            {type === "add"
              ? "Create Payment Method"
              : "Update Payment Method"}
          </h2>

          <p>
            {type === "add"
              ? "Create a new payment method that users can use across the platform."
              : "Update payment method settings below."}
          </p>
        </div>

        <form
          onSubmit={
            handleSubmit
          }
          className={
            styles.form
          }
        >
          <div
            className={
              styles.formGroup
            }
          >
            <label>
              Payment Method
            </label>

            <input
              type="text"
              value={
                data.method
              }
              onChange={(
                e
              ) =>
                setData(
                  "method",
                  e.target
                    .value
                )
              }
              placeholder="BTC, USDT, Bank Transfer..."
            />

            {errors.method && (
              <small
                className={
                  styles.error
                }
              >
                {
                  errors.method
                }
              </small>
            )}
          </div>

          <div
            className={
              styles.grid
            }
          >
            <div
              className={
                styles.formGroup
              }
            >
              <label>
                Method Type
              </label>

              <select
                value={
                  data.type
                }
                onChange={(
                  e
                ) =>
                  setData(
                    "type",
                    e.target
                      .value
                  )
                }
              >
                <option value="">
                  Select Type
                </option>

                <option value="crypto">
                  Crypto
                </option>

                <option value="fiat">
                  Fiat
                </option>
              </select>
            </div>

            <div
              className={
                styles.formGroup
              }
            >
              <label>
                Charges (%)
              </label>

              <input
                type="number"
                value={
                  data.charges
                }
                onChange={(
                  e
                ) =>
                  setData(
                    "charges",
                    e.target
                      .value ===
                      ""
                      ? ""
                      : Number(
                          e
                            .target
                            .value
                        )
                  )
                }
              />
            </div>
          </div>

          <div
            className={
              styles.formGroup
            }
          >
            <label>
              Address
            </label>

            <input
              type="text"
              value={
                data.address
              }
              onChange={(
                e
              ) =>
                setData(
                  "address",
                  e.target
                    .value
                )
              }
              placeholder="Wallet address / Bank details"
            />
          </div>

          <div
            className={
              styles.toggleCard
            }
          >
            <div>
              <h4>
                Enable Method
              </h4>

              <p>
                Allow users
                to use this
                payment
                method.
              </p>
            </div>

            <label
              className={
                styles.switch
              }
            >
              <input
                type="checkbox"
                checked={
                  data.isEnabled
                }
                onChange={(
                  e
                ) =>
                  setData(
                    "isEnabled",
                    e.target
                      .checked
                  )
                }
              />

              <span
                className={
                  styles.slider
                }
              />
            </label>
          </div>

          <button
            type="submit"
            disabled={
              processing
            }
            className={
              styles.submitBtn
            }
          >
            {processing
              ? "Processing..."
              : type ===
                "add"
              ? "Create Payment Method"
              : "Update Payment Method"}
          </button>
        </form>
      </div>
    </div>
  );
};

export default PaymentMethodModal;