import { ChangeEvent } from "react";
import { Trans } from "react-i18next";
import AsteriskIcon from "./icons/AsteriskIcon";
import InputMask from "react-input-mask";
import "./ContactsForm.css";
import useSidebarStore from "../stores/useSidebarStore";

function ContactsForm() {
  const [name, setName, phone, setPhone, email, setEmail] = useSidebarStore(
    (state) => [
      state.name,
      state.setName,
      state.phone,
      state.setPhone,
      state.email,
      state.setEmail,
    ]
  );

  return (
    <div>
      <div className="relative">
        <input
          required
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="feedback-field bg-transparent border border-[#3D425C] rounded-none sm:pt-12 sm:pb-4 sm:px-4 pt-8 pb-3 px-3 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full"
        />
        <p className="feedback-placeholder lg:text-base text-sm absolute sm:pt-4 sm:pb-4 sm:px-4 sm:top-4 pt-3 pb-3 px-3 top-3 w-full opacity-50 transition-all pointer-events-none flex justify-between items-center">
          <span>
            <Trans i18nKey={"feedback.form.field1"}>Имя</Trans>
          </span>
          <AsteriskIcon />
        </p>
      </div>

      <div className="relative">
        <InputMask
          required
          type="tel"
          mask={"+999999999999999"}
          maskChar={null}
          value={phone}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            setPhone(e.target.value)
          }
          className={[
            "feedback-field bg-transparent border rounded-none border-t-0 border-[#3D425C] sm:pt-12 sm:pb-4 sm:px-4 pt-8 pb-3 px-3 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full",
          ].join(" ")}
        />
        <p className="feedback-placeholder lg:text-base text-sm absolute sm:pt-4 sm:pb-4 sm:px-4 sm:top-4 pt-3 pb-3 px-3 top-3 w-full opacity-50 transition-all pointer-events-none flex justify-between items-center">
          <span>
            <Trans i18nKey={"feedback.form.field2"}>Телефон</Trans>
          </span>
          <AsteriskIcon />
        </p>
      </div>

      <div className="relative">
        <input
          required
          type="text"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="feedback-field bg-transparent border rounded-none border-t-0 border-[#3D425C] sm:pt-12 sm:pb-4 sm:px-4 pt-8 pb-3 px-3 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full"
        />
        <p className="feedback-placeholder lg:text-base text-sm absolute sm:pt-4 sm:pb-4 sm:px-4 sm:top-4 pt-3 pb-3 px-3 top-3 w-full opacity-50 transition-all pointer-events-none flex justify-between items-center">
          <span>Email</span>
          <AsteriskIcon />
        </p>
      </div>

      <div className="border border-t-0 border-[#3D425C] sm:px-4 sm:py-6 px-3 py-4 text-xs flex items-center gap-2">
        <div className="flex gap-2">
          <div className="">
            <AsteriskIcon />
          </div>
          <p>—</p>
          <p>
            <Trans i18nKey={"feedback.form.desc2"}>
              Звездочкой отмечены обязательные
              <br />
              для заполнения поля
            </Trans>
          </p>
        </div>
      </div>
    </div>
  );
}

export default ContactsForm;