// @ts-nocheck
/* eslint-disable react-hooks/exhaustive-deps */

import React, {
  useRef,
  useState,
  FormEvent,
  useContext,
  InputHTMLAttributes,
  useEffect,
} from "react";

import dynamic from "next/dynamic";

import { FiSend } from "react-icons/fi";

import Tooltips from "../Tooltip";

const Button = dynamic(() => import("../Button"));

import { Context } from "../../contexts/Context";

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

import {
  handleProblemUppercaseFormatter,
  handleUppercaseFormatter,
} from "../../utils/handleUppercaseFormatter";

interface InputProps {
  color?: string;
  backgroundColor?: string;
  props?: InputHTMLAttributes<HTMLInputElement>;
}

export default function InputArea({
  props,
  color,
  backgroundColor,
}: InputProps) {
  const {
    step,
    containerRef,
    firstOptionSelected,
    othersOptionSelected,
    deviceCompanyOptionSelected,
    handleChangeStep,
    handleChangeUserName,
    handleChangeInputValue,
    handleChangeDeviceModel,
    handleChangeDeviceCompany,
    handleChangeDeviceProblem,
    handleChangeOtherMessagesText,
  } = useContext(Context);

  const [text, setText] = useState("");
  const textRef = useRef(null);
  const [showSentButton, setShowSentButton] = useState(false);

  function handleDontKnowSend() {
    if (step === 4) {
      handleChangeStep(step + 1);
      handleChangeDeviceModel(handleUppercaseFormatter("Não sei"));
    } else if (step === 5) {
      handleChangeStep(step + 1);
      handleChangeDeviceProblem(handleUppercaseFormatter("Não sei"));
    }
  }

  async function handleSendMessage(event: FormEvent) {
    event.preventDefault();

    if (!text.trim()) {
      return;
    }

    switch (step) {
      case 1:
        handleChangeStep(2);
        handleChangeUserName(handleUppercaseFormatter(text));
        break;
      case 3:
        handleChangeStep(step + 1);
        handleChangeOtherMessagesText(handleUppercaseFormatter(text));
        break;
      case 4:
        handleChangeStep(step + 1);
        handleChangeDeviceModel(handleUppercaseFormatter(text));
        break;
      case 5:
        handleChangeStep(step + 1);
        handleChangeDeviceProblem(handleProblemUppercaseFormatter(text));
        break;
      default:
        break;
    }

    setText("");
    handleChangeInputValue("");
    handleScrollToBottom();
  }

  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    setShowSentButton(event.target.value.length > 0);
    handleChangeInputValue(event.target.value);
    setText(event.target.value);

    if (props?.onChange) {
      props.onChange(event);
    }
  };

  function handleScrollToBottom() {
    setTimeout(() => {
      if (containerRef?.current) {
        containerRef.current.scrollTop = containerRef.current.scrollHeight;
      }
    }, 700);
  }

  useEffect(() => {
    handleScrollToBottom();
  }, [
    step,
    othersOptionSelected,
    firstOptionSelected,
    deviceCompanyOptionSelected,
  ]);

  function handleSetPlaceholder() {
    switch (firstOptionSelected) {
      case 1:
        switch (step) {
          case 4:
            return "Ex: iPhone 13 Pro Max";
          case 5:
            return "Ex: Tela quebrada";
          default:
            return "Digite aqui...";
        }
      case 2:
        if (othersOptionSelected === 5 && step === 3) {
          return "Ex: Estão contratando?";
        }
        return "Digite aqui...";
      default:
        return "Digite aqui...";
    }
  }

  return (
    <div
      className={styles.container}
      style={{
        color: color,
        background: backgroundColor,
      }}
    >
      <form onSubmit={handleSendMessage} className={styles.sendMessageForm}>
        <input
          {...props}
          ref={textRef}
          placeholder={step === 1 ? "Ex: Hugo Massote" : handleSetPlaceholder()}
          onChange={onChangeHandler}
          onClick={handleScrollToBottom}
          value={text}
          maxLength={50}
          type="text"
          disabled={
            step === 2 ||
            (step === 3 && firstOptionSelected === 1) ||
            step === 6 ||
            othersOptionSelected === 3 ||
            othersOptionSelected === 4
          }
        />
        {showSentButton && text.length > 0 && (
          <Tooltips placement="top" title="Enviar">
            <div>
              <Button type="submit">
                <FiSend size={16} />
              </Button>
            </div>
          </Tooltips>
        )}
        {firstOptionSelected === 1 &&
          step === 4 &&
          text.length <= 0 &&
          step !== 6 && (
            <Tooltips placement="top" title="Enviar">
              <div>
                <Button
                  type="button"
                  onClick={handleDontKnowSend}
                  style={{
                    fontSize: ".8rem",
                    display: "flex",
                    padding: ".5rem 0.25rem",
                    margin: "0",
                    height: "35px",
                    width: "75px",
                    borderRadius: "15px",
                  }}
                >
                  Não sei
                </Button>
              </div>
            </Tooltips>
          )}
      </form>
    </div>
  );
}