import { formatarValor, GetForm } from "@/utils";
import {
  calcularKmIdaVolta,
  isCustoExtraDeslocamento,
  ParametroDeslocamento,
} from "@/utils/deslocamento";
import { useEffect, useState } from "react";
import ItemCustoExtraMarkup from "./ItemCustoExtraMarkup";

interface IFormMarkupCustosExtras {
  custosExtras: any[];
  setCustosExtras: any;
  onSubmitFunction?: any;
  setBlockNextStep: any;
  /** Parâmetros de deslocamento do tipo de negócio da proposta. */
  parametroDeslocamento?: ParametroDeslocamento | null;
  /** Distância Aproximada da Loja do projeto (Km, somente IDA). */
  distanciaLoja?: any;
  [key: string]: any;
}

const FormMarkupCustosExtras = ({
  custosExtras,
  setCustosExtras,
  onSubmitFunction,
  setBlockNextStep,
  parametroDeslocamento,
  distanciaLoja,
}: IFormMarkupCustosExtras) => {
  const [isLoading, setIsLoading] = useState(false);
  const [noValueExtraChecked, setNoValueExtraChecked] = useState(false);

  const { handleSubmit, ...form } = GetForm();

  // KM sugerido para a cobrança do DESLOCAMENTO: ida e volta.
  const kmSugeridoDeslocamento = calcularKmIdaVolta(distanciaLoja);

  async function onSubmitMarkupCustosExtras(data: any) {
    setIsLoading(true);
    return onSubmitFunction(data).finally(() => setIsLoading(false));
  }

  useEffect(() => {
    setBlockNextStep(true);
    return () => setBlockNextStep(false);
  }, []);

  useEffect(() => {
    const faltaValorEntrada =
      custosExtras.length > 0 &&
      custosExtras.some(
        (custoExtra: any) =>
          custoExtra.isChecked && custoExtra.value_digitado == Number(0),
      );

    setNoValueExtraChecked(faltaValorEntrada);
    setBlockNextStep(faltaValorEntrada);
  }, [custosExtras]);

  const totalCustosExtras = custosExtras.reduce(
    (acumulado: number, custoExtra: any) =>
      custoExtra.isChecked
        ? acumulado + Number(custoExtra.value || 0)
        : acumulado,
    0,
  );

  const semCustosExtras =
    custosExtras.length == 0 ||
    custosExtras.every((custoExtra: any) => custoExtra.tipo_custo_extra == "2");

  return (
    <div className="flex flex-col text-sm">
      <div>
        {semCustosExtras ? (
          <div className="font-bold" onClick={() => console.log(custosExtras)}>
            Não há custos extras para serem listados
          </div>
        ) : (
          "Custos Extras"
        )}
      </div>
      <table>
        <tbody className="text-xs">
          {custosExtras.map((custoExtra: any, indexCustoExtra: number) => (
            <ItemCustoExtraMarkup
              key={custoExtra.id_custo_extra ?? indexCustoExtra}
              itemCustoExtra={custoExtra}
              setCustosExtras={setCustosExtras}
              indexCustoExtra={indexCustoExtra}
              form={form}
              valorSugeridoAoMarcar={
                isCustoExtraDeslocamento(custoExtra)
                  ? kmSugeridoDeslocamento
                  : 0
              }
            />
          ))}
        </tbody>
        {!semCustosExtras && (
          <tfoot className="text-xs">
            <tr>
              <td className="p-2 font-bold">Total dos Custos Extras</td>
              <td className="p-2"></td>
              <td className="p-2 text-right font-bold">
                {formatarValor(totalCustosExtras)}
              </td>
            </tr>
          </tfoot>
        )}
      </table>
      {noValueExtraChecked && (
        <div className="text-error flex-1">
          {"Informe o valor de todas as entradas"}
        </div>
      )}
    </div>
  );
};

export default FormMarkupCustosExtras;