"use client";

import { useState } from "react";
import { router } from "@inertiajs/react";
import { FiX, FiUserX } from "react-icons/fi";

import styles from "./ban-subscriber.module.scss";

interface Props {
  closeModal: () => void;
  patchUrl: string;
  onSuccess?: () => void;
  title: string;
  description: string;
}

const BanSubscriberModal = ({
  closeModal,
  patchUrl,
  onSuccess,
  title,
  description,
}: Props) => {
  const [loading, setLoading] =
    useState(false);

  const handleAction = () => {
    if (!patchUrl) return;

    setLoading(true);

    router.patch(
      patchUrl,
      {},
      {
        preserveScroll: true,

        onSuccess: () => {
          closeModal();

          onSuccess?.();
        },

        onFinish: () => {
          setLoading(false);
        },
      }
    );
  };

  return (
    <div className={styles.confirm}>
      <div className={styles.confirm__card}>
        <button
          type="button"
          className={styles.confirm__close}
          onClick={closeModal}
        >
          <FiX />
        </button>

        <div className={styles.confirm__icon}>
          <FiUserX />
        </div>

        <h2>{title}</h2>

        <p>{description}</p>

        <div
          className={
            styles.confirm__actions
          }
        >
          <button
            type="button"
            onClick={closeModal}
            className={
              styles.confirm__cancel
            }
          >
            Cancel
          </button>

          <button
            type="button"
            disabled={loading}
            onClick={handleAction}
            className={
              styles.confirm__delete
            }
          >
            {loading
              ? "Processing..."
              : "Confirm Action"}
          </button>
        </div>
      </div>
    </div>
  );
};

export default BanSubscriberModal;