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";

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>>;
};

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

  if (!FC) return null;
  const Name = (
    <CustomInput
      onChange={({ target }) => setName(target.value)}
      id={name}
      title={FC["name"].innerText || "Введите имя"}
      desc={FC["name"].text || "Имя"}
      Icon={NameIcon}
    />
  );
  const Email = (
    <CustomInput
      onChange={({ target }) => {
        console.log("onChange of email");
        console.log(target.value);
        setEmail(target.value.replaceAll(/\s/g, ""));
      }}
      id={email}
      title={FC["email"].innerText || "Введите Email"}
      desc={FC["email"].text || "Email"}
      Icon={EmailIcon}
      type="email"
    />
  );
  const Phone = (
    <CustomInput
      onChange={({ target }) => setText(target.value)}
      onChangePhone={(phone: string) => {
        console.log("onChange of phone");
        console.log(phone);
        setPhone(phone);
      }}
      value={phone}
      id={phone}
      title={FC["phone"].innerText || "Введите номер телефона"}
      desc={FC["phone"].text || "Номер телефона"}
      Icon={PhoneIcon}
      isPhone={true}
    />
  );
  const Text = (
    <CustomInput
      onChange={({ target }) => setText(target.value)}
      id={text}
      title={FC["text"].text || "Введите фамилию"}
      desc={FC["text"].innerText || "Фамилия"}
      Icon={TextIcon}
    />
  );
  const Adress = (
    <CustomInput
      onChange={({ target }) => setAdress(target.value)}
      id={adress}
      title={FC["address"].innerText || "Введите адрес"}
      desc={FC["address"].text || "Адрес"}
      Icon={AddressIcon}
    />
  );

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