"use client";

import Button from "../../../ui/Button";

import { useModal } from "../../../../lib/modal-system/ModalContext";
import Input from "../../../ui/CustomInput";
import Select from "../../../ui/CustomSelect";
import { Package } from "../../../../hooks/features/admin/packages/useFetchPackages";
import { useAppForm } from "../../../../hooks/useAppForm";
import {
  PackageFormData,
  packageSchema,
} from "../../../../hooks/features/admin/packages/create/schema";
import { useState } from "react";
import Textarea from "../../../ui/CustomTextArea";

interface PackageFormModalProps {
  mode: "create" | "edit";
  packageData?: Package | null;
  handleAction: (item: PackageFormData) => Promise<void>;
}

export default function PackageFormModal({
  mode,
  packageData,
  handleAction,
}: PackageFormModalProps) {
  const { closeModal } = useModal();
  const [loading, setLoading] = useState(false);

  const { register, control, reset, errors, handleSubmit } =
    useAppForm<PackageFormData>({
      defaultValues: {
        name: packageData?.name ?? "",
        description: packageData?.description ?? "",
        credits: packageData?.credits?.toString() ?? "",
        price: packageData?.price?.toString() ?? "",
        isActive:
          packageData == null
            ? "true"
            : packageData.isActive
              ? "true"
              : "false",
      },
      schema: packageSchema,
      onSubmit: async (data) => {
        try {
          setLoading(true);
          await handleAction(data);
          closeModal();
        } catch (error) {
        } finally {
          setLoading(false);
        }
      },
    });

  return (
    <form onSubmit={handleSubmit}>
      <h2 className="mb-5 2xl:mb-8 text-center text-xl xl:text-2xl font-bold text-heading">
        {mode === "create" ? "Create Package" : "Edit Package"}
      </h2>

      <div className="space-y-3 2xl:space-y-5">
        <Input
          label="Title"
          placeholder="Enter Title"
          required
          register={register("name")}
          error={errors.name?.message}
        />

        {/* <Input
          label="Description"
          placeholder="Enter Description"
          required
          register={register("description")}
          error={errors.description?.message}
        /> */}

        <Textarea
          label="Description"
          placeholder="Enter Description"
          required
          register={register("description")}
          error={errors.description?.message}
        />

        <div className="grid gap-x-4 gap-y-3 2xl:gap-5 md:grid-cols-2">
          <Input
            label="Price"
            placeholder="Enter Price"
            required
            register={register("price")}
            error={errors.price?.message}
          />

          <Input
            label="Credits"
            type="number"
            placeholder="Enter Credit"
            required
            register={register("credits")}
            error={errors.credits?.message}
          />
        </div>

        <Select<PackageFormData>
          name="isActive"
          control={control}
          label="Status"
          required
          placeholder="Select Status"
          options={[
            { label: "Active", value: "true" },
            { label: "Inactive", value: "false" },
          ]}
          error={errors.isActive?.message}
        />
      </div>

      <div className="mt-5 md:mt-8 grid gap-3 md:gap-5 grid-cols-2">
        <Button
          type="button"
          variant="white"
          onClick={closeModal}
          className="w-full"
          buttonClassName="w-full shadow-none!"
        >
          Cancel
        </Button>

        <Button
          type="submit"
          className="w-full"
          loading={loading}
          buttonClassName="w-full shadow-none!"
        >
          {mode == "create" ? "Save" : "Update"}
        </Button>
      </div>
    </form>
  );
}