import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { atividadeCardsPorCidade } from "@/requests/CRM/Dashboard/listarDashboard";
import { useColorContext } from "@/src/contexts/ColorContext";
import { useAuth } from "@/src/contexts/authContext";
import { ApexOptions } from "apexcharts";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

const ReactApexChart = dynamic(() => import("react-apexcharts"), {
  ssr: false,
});

const GraficoAtividadeLeadsCidade = ({ data, usuarios }: any) => {
  const { valuesSession, perfil } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const [series, setSeries] = useState<any[]>([]);
  const [groups, setGroups] = useState<any[]>([]);
  const [dropdownVisible, setDropdownVisible] = useState(false);
  // const [usuarios, setUsuarios] = useState<any[]>([]);
  const [usuarioSelecionado, setUsuarioSelecionado] = useState<any>(
    perfil.visualiza_todos_contatos_perfil == "0" ? id_usuario : "*"
  );
  const [isLoading, setIsLoading] = useState(true);

  const { colorMode } = useColorContext();

  useEffect(() => {
    atualizarAtividades();
  }, []);

  useEffect(() => {
    if (usuarioSelecionado) {
      atualizarAtividades(
        usuarioSelecionado == "*" ? undefined : usuarioSelecionado
      );
    }
  }, [usuarioSelecionado]);

  function atualizarAtividades(vendedor: string | undefined = undefined) {
    setIsLoading(true);
    atividadeCardsPorCidade(vendedor)
      .then((res: any) => {
        res = res.filter((e: any) => e.cidade_coleta);
        setGroups(res.map((e: any) => e.cidade_coleta || "Não definido"));
        setSeries([
          {
            name: "Ativos",
            data: res.map((e: any) => e.quantidade_ativos),
          },
          {
            name: "Inativos",
            data: res.map((e: any) => e.quantidade_inativos),
          },
        ]);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }

  const options: ApexOptions = {
    chart: {
      type: "bar",
      height: 350,
      stacked: true,
      toolbar: {
        show: true,
      },
      zoom: {
        enabled: true,
      },
      background: "transparent",
    },

    theme: {
      mode: colorMode == "dark" ? "dark" : "light",
      monochrome: {
        enabled: false,
      },
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            position: "bottom",
            offsetX: -10,
            offsetY: 0,
          },
        },
      },
    ],
    plotOptions: {
      bar: {
        horizontal: false,
        // borderRadius: 10,
        dataLabels: {
          total: {
            enabled: true,
            style: {
              fontSize: "13px",
              fontWeight: 900,
              color: colorMode == "dark" ? "#fff" : "#000",
            },
          },
        },
      },
    },
    xaxis: {
      labels: {
        rotate: -45,
        trim: true,
        hideOverlappingLabels: false,
      },
      categories: groups,
      tickPlacement: "on",
    },
    legend: {
      position: "right",
      offsetY: 40,
    },
    fill: {
      opacity: 1,
    },
    noData: {
      text: "Nenhum Dado Disponível",
      align: "center",
      verticalAlign: "middle",
      offsetX: 0,
      offsetY: 0,
      style: {
        fontSize: "20px",
        color: "#888",
      },
    },
  };

  return (
    <div className="bg-white rounded ml-3 p-4 mt-3 w-1/1 dark:bg-boxdark dark:text-white">
      <p className="font-semibold">{data.nome_grafico}</p>
      <div className="flex flex-row justify-between items-center gap-2 pt-2">
        <InputSelectComponent
          // label="Vendedor"
          options={
            usuarios?.length > 0
              ? [
                  { label: "Todos Vendedores", value: "*" },
                  ...usuarios.map((usuario: any) => ({
                    label: usuario.nome_usuario,
                    value: usuario.id_usuario,
                  })),
                ]
              : []
          }
          onChange={(e: any) => setUsuarioSelecionado(e.value)}
          width="w-67"
          placeholder="Todos Vendedores"
          disabled={perfil.visualiza_todos_contatos_perfil == "0"}
          defaultValue={usuarioSelecionado}
        />
      </div>
      {isLoading ? (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      ) : (
        series[0] &&
        series.length > 0 && (
          <ReactApexChart
            options={options}
            series={series}
            type="bar"
            height={350}
          />
        )
      )}
    </div>
  );
};

export default GraficoAtividadeLeadsCidade;