import { Button } from "@/shared/common/ui/button";
import { Loader2 } from "lucide-react";
import {
  FormInputBox,
  FormSelector,
  FormSingleBox,
  FormToggle,
} from "../components/FormInputBox";
import { FormProps } from "./EditContactUs";
import { ContactUsList } from "../types/contactUs";

const ContactUsForm = ({
  handleSubmit,
  handleCancel,
  watch,
  control,
  setValue,
  register,
  errors,
  isSubmitting,
  reset,
  item,
  label,
}: FormProps) => {
  const socialItem: ContactUsList[] = [
    {
      label: "Location",
      value: "LOCATION",
    },
    {
      label: "Phone Number",
      value: "PHONE_NUMBER",
    },
    {
      label: "Email",
      value: "EMAIL",
    },
  ];
  return (
    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
      <form onSubmit={handleSubmit} className="space-y-8">
        {/* message type */}
        <FormSelector
          id="type"
          label="Contact Information Type"
          error="Type is Required"
          errors={errors}
          register={register}
          control={control}
          item={socialItem}
        />

        {/* Title Section */}
        <FormInputBox
          idEn="nameEn"
          idAm="nameAm"
          label="Name"
          error="Name is Required"
          errors={errors}
          register={register}
        />

        {/* Description Section */}
        <FormSingleBox
          id="value"
          label="Value"
          watch={watch}
          setValue={setValue}
          register={register}
          error="Value is required"
          errors={errors}
          type="link"
        />

        {/* isActive Toggle */}
        <FormToggle
          idAm="isActive"
          label="Status"
          watch={watch}
          setValue={setValue}
        />

        {/* Actions */}
        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
          <Button
            variant="outline"
            onClick={handleCancel}
            type="button"
            disabled={isSubmitting}
            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
          >
            Cancel
          </Button>

          <Button
            type="submit"
            disabled={isSubmitting}
            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
          >
            {isSubmitting ? (
              <span className="flex items-center gap-2">
                <Loader2 className="w-4 h-4 animate-spin" />
                ...
              </span>
            ) : (
              label
            )}
          </Button>
        </div>
      </form>
    </div>
  );
};
export default ContactUsForm;
