import { useQuizSettings } from "@contexts/QuizDataContext.ts";
import NameIcon from "@icons/ContactFormIcon/NameIcon.tsx";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon.tsx";
import TextIcon from "@icons/ContactFormIcon/TextIcon.tsx";
import AddressIcon from "@icons/ContactFormIcon/AddressIcon.tsx";
import { Dispatch, SetStateAction } from "react";
import { CustomInput } from "@/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon.tsx";
import PhoneInput from "react-phone-number-input";
import { useTranslation } from "react-i18next";

type InputsProps = {
  name: string;
  setName: Dispatch<SetStateAction<string>>;
  email: string;
  setEmail: Dispatch<SetStateAction<string>>;
  phone: string;
  setPhone: Dispatch<SetStateAction<string>>;
  text: string;
  setText: Dispatch<SetStateAction<string>>;
  adress: string;
  setAdress: Dispatch<SetStateAction<string>>;
  crutch: {
    disableEmail: boolean;
  };
};

export const Inputs = ({
  name,
  setName,
  email,
  setEmail,
  phone,
  setPhone,
  text,
  setText,
  adress,
  setAdress,
  crutch,
}: InputsProps) => {
  const { settings } = useQuizSettings();
  const { t } = useTranslation();
  const FC = settings.cfg.formContact.fields;

  if (!FC) return null;
  const Name = (
    <CustomInput
      onChange={({ target }) => setName(target.value)}
      id={name}
      title={FC["name"].innerText || `${t("Enter")} ${t("Name").toLowerCase()}`}
      desc={FC["name"].text || t("Name")}
      Icon={NameIcon}
    />
  );
  const Email = (
    <CustomInput
      onChange={({ target }) => {
        setEmail(target.value.replaceAll(/\s/g, ""));
      }}
      id={email}
      title={FC["email"].innerText || `${t("Enter")} Email`}
      desc={FC["email"].text || "Email"}
      Icon={EmailIcon}
      type="email"
    />
  );
  const Phone = (
    <CustomInput
      onChange={({ target }) => setText(target.value)}
      onChangePhone={(phone: string) => {
        setPhone(phone);
      }}
      value={phone}
      id={phone}
      title={FC["phone"].innerText || `${t("Enter")} ${t("Phone number").toLowerCase()}`}
      desc={FC["phone"].text || t("Phone number")}
      Icon={PhoneIcon}
      isPhone={true}
    />
  );
  const Text = (
    <CustomInput
      onChange={({ target }) => setText(target.value)}
      id={text}
      title={FC["text"].text || `${t("Enter")} ${t("Last name").toLowerCase()}`}
      desc={FC["text"].innerText || t("Last name")}
      Icon={TextIcon}
    />
  );
  const Adress = (
    <CustomInput
      onChange={({ target }) => setAdress(target.value)}
      id={adress}
      title={FC["address"].innerText || `${t("Enter")} ${t("Address").toLowerCase()}`}
      desc={FC["address"].text || t("Address")}
      Icon={AddressIcon}
    />
  );

  if (Object.values(FC).some((data) => data.used)) {
    return (
      <>
        {FC["name"].used ? Name : <></>}
        {FC["email"].used && !crutch.disableEmail ? Email : <></>}
        {FC["phone"].used ? Phone : <></>}
        {FC["text"].used ? Text : <></>}
        {FC["address"].used ? Adress : <></>}
      </>
    );
  } else {
    return (
      <>
        {Name}
        {Email}
        {Phone}
      </>
    );
  }
};