"use client";
import { Checkbox } from "@/components/FormElements/checkbox";
import InputGroup from "@/components/FormElements/InputGroup";
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import { FormErrorMessages } from "@/constants/Texts";
import { forwardRef, useImperativeHandle } from "react";
import useContactsStepPresenter from "./useContactsStepPresenter";

interface ContactsStepProps {
  initialData?: any;
}

const ContactsStep = forwardRef<unknown, ContactsStepProps>(
  ({ initialData }, ref) => {
    const { errors, handleSubmit, onSubmit, register, fields, getValues } =
      useContactsStepPresenter(initialData);

    useImperativeHandle(ref, () => ({
      getData: () => getValues(),
    }));

    return (
      <form
        className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7"
        onSubmit={handleSubmit(onSubmit)}
      >
        <ShowcaseSection
          title="Contacts Section"
          className="flex flex-col gap-5"
        >
          <div className="flex flex-col gap-9">
            <InputGroup
              {...register("title", {
                required: { message: FormErrorMessages.required, value: true },
              })}
              label="Title"
              name="title"
              required
              type="text"
              placeholder="Enter Title"
            />
            {errors.title && (
              <p className="mt-1 text-sm text-red-500">
                {errors.title.message as string}
              </p>
            )}
            <TextAreaGroup
              label="Description"
              {...register("description")}
              name="description"
              placeholder="Enter Description"
            />
            <InputGroup
              {...register("submit_button_text")}
              label="Submit Button Text"
              name="submit_button_text"
              type="text"
              placeholder="Enter Submit Button Text"
            />
          </div>
        </ShowcaseSection>
        <ShowcaseSection title="Form Fields" className="flex flex-col gap-5">
          {fields.map((field, index) => (
            <div
              key={field.id}
              className="grid grid-cols-1 items-center gap-4 sm:grid-cols-2"
            >
              <InputGroup
                {...register(`fields.${index}.name`)}
                label="Field Name"
                name={`fields.${index}.name`}
                type="text"
                placeholder="Field Name"
                disabled
              />
              <InputGroup
                {...register(`fields.${index}.label`)}
                label="Label"
                name={`fields.${index}.label`}
                type="text"
                placeholder="Enter Label"
              />
              <InputGroup
                {...register(`fields.${index}.placeholder`)}
                label="Placeholder"
                name={`fields.${index}.placeholder`}
                type="text"
                placeholder="Enter Placeholder"
              />
              <Checkbox
                {...register(`fields.${index}.required`)}
                label="Required"
                minimal
                withIcon="check"
                withBg
                name={`fields.${index}.required`}
              />
            </div>
          ))}
        </ShowcaseSection>
      </form>
    );
  },
);

ContactsStep.displayName = "ContactsStep";

export default ContactsStep;