import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import { TableCell, TableRow } from "@/components/ui/table";
import { FormatFields, proximoNumeroFloat } from "@/utils";
import { Plus, X } from "lucide-react";
import { Dispatch, Fragment, SetStateAction, useState } from "react";

const ItemCfgPoliticaComissoes = ({
  indexPoliticaComissao,
  columns,
  politicaComissao,
  politicasComissoes,
  setPoliticasComissoes,
}: {
  indexPoliticaComissao: number;
  columns: {
    header: string;
    accessorKey: string;
  }[];
  politicaComissao: any;
  politicasComissoes: any[];
  setPoliticasComissoes: Dispatch<SetStateAction<any[]>>;
}) => {
  const [isHovering, setIsHovering] = useState(false);
  return (
    <Fragment>
      <TableRow
        onMouseOver={() => setIsHovering(true)}
        onMouseOut={() => setIsHovering(false)}
      >
        {columns.map((col, index) => (
          <TableCell key={index} className="py-2 text-center">
            <div className="mx-auto flex flex-row gap-2">
              <Input
                name=""
                defaultValue={politicaComissao[col.accessorKey]}
                mascara="numero"
                onChange={(e) =>
                  setPoliticasComissoes((prev) => {
                    const newPoliticasComissoes = [...prev];
                    newPoliticasComissoes.splice(indexPoliticaComissao, 1, {
                      ...prev[indexPoliticaComissao],
                      [col.accessorKey]: e.target.value,
                    });
                    return newPoliticasComissoes;
                  })
                }
                disabled={indexPoliticaComissao == 0 && index == 0}
              />
            </div>
          </TableCell>
        ))}
        <TableCell>
          <Button
            type="button"
            onClick={() =>
              setPoliticasComissoes((prev) => {
                const newPoliticasComissoes = [...prev];
                newPoliticasComissoes.splice(indexPoliticaComissao, 1);
                return newPoliticasComissoes;
              })
            }
            className="bg-error"
          >
            <X />
          </Button>
        </TableCell>
      </TableRow>
      <TableRow
        className="h-0"
        onMouseOver={() => setIsHovering(true)}
        onMouseOut={() => setIsHovering(false)}
      >
        <TableCell colSpan={6} className="p-0"></TableCell>
        <TableCell className="p-0 flex items-center justify-center h-0">
          {isHovering && (
            <button
              className="bg-primary text-white p-1 rounded"
              type="button"
              onClick={() =>
                setPoliticasComissoes((prev) => [
                  ...prev,
                  columns.reduce((acc: any, col) => {
                    acc[col.accessorKey] =
                      col.accessorKey ==
                      "min_valor_kit_politica_comissao_usuario"
                        ? FormatFields.formatarNumero(
                            proximoNumeroFloat(
                              politicasComissoes.map((registro: any) => [
                                Number(
                                  FormatFields.desformatarNumeros(
                                    registro.min_valor_kit_politica_comissao_usuario
                                  )
                                ),
                                Number(
                                  FormatFields.desformatarNumeros(
                                    registro.max_valor_kit_politica_comissao_usuario
                                  )
                                ),
                              ])
                            )
                          )
                        : "";
                    return acc;
                  }, {}),
                ])
              }
            >
              <Plus />
            </button>
          )}
        </TableCell>
      </TableRow>
    </Fragment>
  );
};

export default ItemCfgPoliticaComissoes;