import Input from "@/components/Forms/Input";
import { formatarValor, FormatFields } from "@/utils";
import { useEffect, useState } from "react";

const ItemCustoExtraMarkup = ({
  itemCustoExtra,
  indexCustoExtra,
  form,
  setCustosExtras,
  /**
   * Valor a ser sugerido no campo de entrada no momento em que o usuário
   * MARCA o custo extra (usado pelo DESLOCAMENTO: Km ida e volta).
   * Zero desliga a sugestão.
   */
  valorSugeridoAoMarcar = 0,
}: any) => {
  //   const [isChecked, setIsChecked] = useState(true);
  const { isChecked, valorKit, valoresProduto, valoresServico } =
    itemCustoExtra;
  const { formatarNumero, desformatarNumeros } = FormatFields;

  const valorInicialDigitado =
    itemCustoExtra.value_digitado != null &&
    itemCustoExtra.value_digitado !== ""
      ? Number(itemCustoExtra.value_digitado)
      : Number(
          itemCustoExtra.tipo_custo_extra == "1"
            ? "0"
            : itemCustoExtra.metodo_custo_extra == "3" ||
                itemCustoExtra.metodo_custo_extra == "4" ||
                itemCustoExtra.metodo_custo_extra == "6"
              ? itemCustoExtra.qtd_custo_extra
              : "1.00",
        );

  const [valorDigitadoCustoExtra, setValorDigitadoCustoExtra] = useState(
    Number.isFinite(valorInicialDigitado) ? valorInicialDigitado : 0,
  );

  const [valueCustoExtra, setValueCustoExtra] = useState(0);

  // Mantém o input sincronizado quando a sugestão de DESLOCAMENTO chega
  // do pai já com isChecked + value_digitado (ex.: Km ida e volta).
  useEffect(() => {
    const sugerido = Number(itemCustoExtra.value_digitado);
    if (
      itemCustoExtra.isChecked &&
      Number.isFinite(sugerido) &&
      sugerido > 0 &&
      sugerido !== Number(valorDigitadoCustoExtra)
    ) {
      setValorDigitadoCustoExtra(sugerido);
      form?.setValue(
        `${itemCustoExtra.id_custo_extra}-valor`,
        formatarNumero(sugerido),
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [itemCustoExtra.isChecked, itemCustoExtra.value_digitado]);

  useEffect(() => {
    setValueCustoExtra(calcularValueCustoExtra(valorDigitadoCustoExtra));
  }, [valorDigitadoCustoExtra]);

  useEffect(() => {
    setCustosExtras((prev: any) => {
      const newCustosExtras = [...prev];
      const atual = newCustosExtras[indexCustoExtra] || itemCustoExtra;
      newCustosExtras.splice(indexCustoExtra, 1, {
        ...atual,
        value: valueCustoExtra,
        value_digitado: valorDigitadoCustoExtra,
      });
      return newCustosExtras;
    });
  }, [valueCustoExtra]);

  // Ao MARCAR o custo extra o input de entrada é remontado. Este efeito roda
  // depois da remontagem e garante que o valor em memória (inclusive a sugestão
  // de Kms do DESLOCAMENTO) apareça de fato na tela.
  // Depende só de isChecked para não interferir na digitação do usuário.
  useEffect(() => {
    if (!isChecked) return;
    form?.setValue(
      `${itemCustoExtra.id_custo_extra}-valor`,
      formatarNumero(valorDigitadoCustoExtra),
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isChecked]);

  function calcularValueCustoExtra(valorDigitadoCustoExtra: number) {
    let value = 0;
    switch (itemCustoExtra.metodo_custo_extra) {
      case "2":
      case "1":
      case "6":
        value =
          Number(itemCustoExtra.tabelaPrecos?.qtd_custo_extra_tabela) || 0;
        break;

      case "1":
        value =
          Number(itemCustoExtra.tabelaPrecos?.qtd_custo_extra_tabela) *
          valoresServico.qtd_modulos;
        break;

      case "3":
        value = valorDigitadoCustoExtra;
        break;

      case "4":
        switch (itemCustoExtra.formula_custo_extra) {
          case "1":
            value =
              valorDigitadoCustoExtra * Number(itemCustoExtra.qtd_custo_extra);
            break;

          case "2":
            value =
              Math.ceil(
                valoresServico.qtd_modulos /
                  (Number(itemCustoExtra.modulosDia_loja) /
                    Number(itemCustoExtra.instaladoresDia_loja)),
              ) *
              Number(itemCustoExtra.qtd_custo_extra) *
              (itemCustoExtra.tipo_custo_extra == "1"
                ? valorDigitadoCustoExtra
                : 1);
            break;

          case "3":
            value =
              valoresServico.qtd_modulos *
              (itemCustoExtra.tipo_custo_extra == "1"
                ? valorDigitadoCustoExtra
                : Number(itemCustoExtra.qtd_custo_extra));
            break;

          case "4":
            value =
              valoresServico.potencia_sistema *
              (itemCustoExtra.tipo_custo_extra == "1"
                ? valorDigitadoCustoExtra
                : Number(itemCustoExtra.qtd_custo_extra));
            break;

          case "5":
            value =
              valoresServico.qtd_ucs *
              (itemCustoExtra.tipo_custo_extra == "1"
                ? valorDigitadoCustoExtra
                : Number(itemCustoExtra.qtd_custo_extra));
            break;

          default:
            break;
        }
        break;

      case "5":
        switch (itemCustoExtra.percentualDe_custo_extra) {
          case "1":
            value = valorKit * Number(itemCustoExtra.qtd_custo_extra / 100);
            break;

          case "2":
            value =
              valoresProduto.valor_produto *
              Number(itemCustoExtra.qtd_custo_extra / 100);
            break;

          case "3":
            value =
              valoresServico.valor_servico *
              Number(itemCustoExtra.qtd_custo_extra / 100);
            break;

          default:
            break;
        }
        break;

      default:
        break;
    }
    return value;
  }

  if (itemCustoExtra.tipo_custo_extra == "0") {
    return (
      <tr className={`opacity-${isChecked ? "100" : "70"}`}>
        <td className="p-2 border-b">
          <Input
            name={itemCustoExtra.id_custo_extra}
            label={itemCustoExtra.descricaoProposta_custo_extra}
            formulario={form}
            type={"checkbox"}
            checked={isChecked}
            width={"w-fit font-bold"}
            onChange={(e) => {
              setCustosExtras((prev: any) => {
                const newCustosExtras = [...prev];
                newCustosExtras.splice(indexCustoExtra, 1, {
                  ...itemCustoExtra,
                  isChecked: e.target.checked,
                });
                return newCustosExtras;
              });
            }}
          />
        </td>
        <td className="p-2 border-b"></td>
        {isChecked ? (
          <td className="p-2 border-b text-right italic">
            {formatarValor(itemCustoExtra.value)}
          </td>
        ) : (
          <td className="p-2 border-b text-right italic">{formatarValor(0)}</td>
        )}
      </tr>
    );
  }
  if (itemCustoExtra.tipo_custo_extra == "1") {
    return (
      <tr className={`opacity-${isChecked ? "100" : "70"}`}>
        <td className="p-2 border-b">
          <Input
            name={itemCustoExtra.id_custo_extra}
            label={itemCustoExtra.descricaoProposta_custo_extra}
            formulario={form}
            type={"checkbox"}
            checked={isChecked}
            width={"w-fit font-bold"}
            onChange={(e) => {
              const marcado = e.target.checked;

              // Ao MARCAR, sugere o valor calculado (ex: Kms de ida e volta do
              // DESLOCAMENTO) quando o usuário ainda não digitou nada.
              const valorAoMarcar =
                marcado &&
                Number(valorSugeridoAoMarcar) > 0 &&
                !(Number(valorDigitadoCustoExtra) > 0)
                  ? Number(valorSugeridoAoMarcar)
                  : valorDigitadoCustoExtra;

              if (Number(valorAoMarcar) !== Number(valorDigitadoCustoExtra)) {
                setValorDigitadoCustoExtra(valorAoMarcar);
              }

              setCustosExtras((prev: any) => {
                const newCustosExtras = [...prev];
                newCustosExtras.splice(indexCustoExtra, 1, {
                  ...itemCustoExtra,
                  isChecked: marcado,
                  value_digitado: valorAoMarcar,
                });
                return newCustosExtras;
              });
            }}
          />
        </td>
        {isChecked ? (
          <>
            <td className="p-2 border-b">
              <div className="flex flex-row gap-2 items-center justify-end italic">
                <div>{itemCustoExtra.label_custo_extra}</div>
                <Input
                  key={`${itemCustoExtra.id_custo_extra}-valor-${isChecked ? "on" : "off"}-${Number(valorDigitadoCustoExtra) > 0 ? "v" : "z"}`}
                  name={`${itemCustoExtra.id_custo_extra}-valor`}
                  formulario={form}
                  mascara="numero"
                  width={"w-fit"}
                  inputClassName={
                    itemCustoExtra.value_digitado == 0
                      ? "border-error/50 focus:border-error/70 active:border-error"
                      : undefined
                  }
                  defaultValue={formatarNumero(valorDigitadoCustoExtra)}
                  onChange={(e: any) => {
                    const valorDigitado = e.target.value
                      ? Number(desformatarNumeros(e.target.value))
                      : 0;
                    setValorDigitadoCustoExtra(valorDigitado);
                    setCustosExtras((prev: any) => {
                      const newCustosExtras = [...prev];
                      newCustosExtras.splice(indexCustoExtra, 1, {
                        ...itemCustoExtra,
                        value_digitado: valorDigitado,
                      });
                      return newCustosExtras;
                    });
                    form.setValue(
                      `${itemCustoExtra.id_custo_extra}-valor`,
                      e.target.value,
                    );
                  }}
                />
              </div>
            </td>
            <td className="p-2 border-b text-right italic">
              <div>{formatarValor(valueCustoExtra)}</div>
            </td>
          </>
        ) : (
          <>
            <td className="p-2 border-b">
              <section className="flex flex-row gap-2 items-center justify-end italic">
                <div>{itemCustoExtra.label_custo_extra}</div>
                <Input
                  name={`${itemCustoExtra.id_custo_extra}-valor`}
                  mascara="numero"
                  width={"w-fit"}
                  defaultValue={"0,00"}
                  disabled
                />
              </section>
            </td>
            <td className="p-2 border-b text-right italic">
              <div>{formatarValor(0)}</div>
            </td>
          </>
        )}
      </tr>
    );
  }
  if (itemCustoExtra.tipo_custo_extra == "2") {
    return (
      <tr>
        <td className="hidden">
          <Input
            name={itemCustoExtra.id_custo_extra}
            label={itemCustoExtra.descricaoProposta_custo_extra}
            formulario={form}
            type={"checkbox"}
            checked={isChecked}
            width={"hidden"}
            onChange={(e) => {
              e.target.checked = true;
            }}
          />
        </td>
      </tr>
    );
  }
};

export default ItemCustoExtraMarkup;