import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { useEffect, useState } from "react";

export function CardHistorico({ dados }: any) {
  const [statusFormatado, setStatusFormatado] = useState(
    dados["status_coleta"]
  );

  useEffect(() => {
    switch (dados["status_coleta"]) {
      case "0":
        dados["status_coleta"] = (
          <span className="text-primary">Negociação</span>
        );
        break;

      case "1":
        dados["status_coleta"] = (
          <span className="text-success">Proposta Aprovada</span>
        );
        break;

      case "2":
        dados["status_coleta"] = (
          <span className="text-success">Contrato Aprovado</span>
        );
        break;

      case "3":
        dados["status_coleta"] = <span className="text-danger">Cancelado</span>;
      case "4":
        dados["status_coleta"] = (
          <span className="text-success">Pagamento Pelo Cliente</span>
        );
      case "5":
        dados["status_coleta"] = (
          <span className="text-success">Venda finalizada</span>
        );
        break;

      default:
        dados["status_coleta"] = (
          <span className="text-black-2 dark:text-white">Sem Informação</span>
        );
        break;
    }
    setStatusFormatado(dados["status_coleta"]);
  }, [dados]);

  return (
    <Card className="w-[300px] h-[300px] dark:bg-form-input p-6 hover:shadow-4 transition hover:scale-105">
      <CardContent className="p-1">
        <div className="flex flex-row justify-between w-full mb-4">
          <div className="text-sm bg-secondaryMenu rounded-md w-full text-white">
            N° Negocio: {dados["id_coleta"]}
          </div>
        </div>
        <div className="flex flex-col justify-center items-center gap-2 h-full">
          <div className="text-xl">{dados["nome_negocio_coleta"]}</div>
          {dados["kit_proposta"] != null && (
            <>
              <div className="text-md">
                {(dados["qtdModulos_kit_distribuidor"] ||
                  dados["qtdModulos_kit"]) +
                  " " +
                  (dados["descricao_modulo_distribuidor"] ||
                    dados["descricao_modulo"])}
              </div>
              <div className="text-md gap-2">
                {(dados["qtdInversor1_kit_distribuidor"] ||
                  dados["qtdInversor1_kit"]) +
                  " " +
                  (dados["descricao_inversor1"] ||
                    dados["descricao_inversor1_manual"]) +
                  " "}
              </div>
              {(dados["descricao_inversor2"] ||
                dados["descricao_inversor2_manual"]) && (
                <div>
                  {(dados["qtdInversor2_kit_distribuidor"] ||
                    dados["qtdInversor2_kit"]) +
                    "" +
                    (dados["descricao_inversor2"] ||
                      dados["descricao_inversor2_manual"])}
                </div>
              )}
            </>
          )}

          {/* 
            * 31/10/2024
            * Leonardo
            * Será adicionado novamente em versão maiores que 1.0
            *
          <div className="text-md">Status: {statusFormatado}</div> */}
        </div>
      </CardContent>
      <CardFooter className=" flex flex-col h-2 w-full">
        <span className="text-sm">{dados["data_proposta"] || "Sem Data"}</span>
      </CardFooter>
    </Card>
  );
}