import { listarPropostasGrafico } from "@/requests/CRUD/Propostas/listarPropostas";
import GraficoDinamico from "../GraficoGeraDinamico";

const GraficoPropostas = (props: any) => (
  <GraficoDinamico
    nomeGrafico={props.label}
    buscar={async ({ usuario, periodoSelecionado, lojas, tipoNegocio, classificacaoNegocio }) => {
      const resposta = await listarPropostasGrafico(
        usuario,
        periodoSelecionado,
        lojas,
        tipoNegocio,
        classificacaoNegocio
      );
      return (resposta || [])
        .filter((e: any) => e.data)
        .map((e: any) => ({
          ...e,
          valores_geradas_fmt: Number(e.valores_geradas).toLocaleString(
            "pt-BR",
            { minimumFractionDigits: 2, maximumFractionDigits: 2 }
          ),
          valores_aprovadas_fmt: Number(e.valores_aprovadas).toLocaleString(
            "pt-BR",
            { minimumFractionDigits: 2, maximumFractionDigits: 2 }
          ),
          valores_canceladas_fmt: Number(e.valores_canceladas).toLocaleString(
            "pt-BR",
            { minimumFractionDigits: 2, maximumFractionDigits: 2 }
          ),
        }));
    }}
    tooltipCustom={(item, label) => `
    <div style="padding:8px">
      <strong>${label}</strong><br/>
      Geradas: ${item.propostas_geradas} 
      (${Number(item.valores_geradas).toLocaleString("pt-BR", { style: "currency", currency: "BRL" })})<br/>
      Aprovadas: ${item.propostas_aprovadas} 
      (${Number(item.valores_aprovadas).toLocaleString("pt-BR", { style: "currency", currency: "BRL" })})<br/>
      Canceladas: ${item.propostas_canceladas} 
      (${Number(item.valores_canceladas).toLocaleString("pt-BR", { style: "currency", currency: "BRL" })})
    </div>
  `}
    usuarios={props.usuarios}
    lojas={props.lojas}
    tipoNegocio={props.tipoNegocio}
    classificacaoNegocio={props.classificacaoNegocio}
    periodoSelecionado={props.periodoSelecionado}
    chaveLabel="data"
    chavesSeries={[
      { nome: "Geradas", campo: "propostas_geradas" },
      { nome: "Aprovadas", campo: "propostas_aprovadas" },
      { nome: "Canceladas", campo: "propostas_canceladas" },
      { nome: "Valor Geradas", campo: "valores_geradas" },
      { nome: "Valor Aprovadas", campo: "valores_aprovadas" },
      { nome: "Valor Canceladas", campo: "valores_canceladas" },
    ]}
    tiposGrafico={["Pizza", "Barra", "Linha"]}
    serieTotalQtde="propostas_total"
  />
);

export default GraficoPropostas;