import { useEffect, useRef, useState } from "react";

import InputText from "@/components/quiz-section/input-text";
import LabelInput from "@/components/quiz-section/label-input";
import Object3dBounds from "@/components/quiz-section/object3d-bounds";
import { getCopy } from "@/config/copy";
import { QUIZ_STEPS, QUIZ_STEPS_VARIANTS } from "@/config/data";
import { useStore } from "@/store";

import parentStyles from "../styles.module.scss";

const QuestionWhatLoveSection = ({
  label,
  placeholder,
  setButtonState,
  clickButton,
}: {
  label: string;
  placeholder: string;
  setButtonState: (state: boolean) => void;
  clickButton: () => void;
}) => {
  const step = useStore.use.step();

  const description = useStore.use.description();
  const setDescription = useStore.use.setDescription();
  const errorWarning = useStore.use.errorWarning();
  const setErrorWarning = useStore.use.setErrorWarning();
  const showErrorWarning = useStore.use.showErrorWarning();

  const nameTo = useStore.use.nameTo();
  const labelFormated = label.replace(
    "[NAMETO]",
    `<span style="color: #FFEEF8;">${nameTo}</span>`,
  );
  const ariaLabelFormated = label.replace("[NAMETO]", `${nameTo}`);

  const inputRef = useRef(null);

  const isCurrentStep =
    QUIZ_STEPS[step]?.id === QUIZ_STEPS_VARIANTS["question-what-love"];

  useEffect(() => {
    if (isCurrentStep) {
      (inputRef.current as any).validateInput(description, true);
    } else {
      (inputRef.current as any).removeFocus();
    }
  }, [description, isCurrentStep]);

  return (
    <div className={parentStyles.fieldText}>
      <Object3dBounds />
      <LabelInput
        label={labelFormated}
        ariaHidden={!isCurrentStep || undefined}
      />
      <InputText
        ref={inputRef}
        type="multiline"
        placeholder={placeholder}
        value={description}
        tabIndex={isCurrentStep ? 0 : -1}
        ariaHidden={!isCurrentStep || undefined}
        min={2}
        max={70}
        ariaLabel={ariaLabelFormated}
        onChange={(text) => setDescription(text)}
        onValidate={(ok: boolean) => setButtonState(ok)}
        onError={(error: string, input: HTMLInputElement) => {
          setErrorWarning({ message: getCopy("sign:error"), input: input });
        }}
        onEnterKey={clickButton}
      />
    </div>
  );
};

export default QuestionWhatLoveSection;