import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarVisitasGrafico } from "@/requests/CRM/agenda";
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 GraficoVisitas = ({ 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 [periodoSelecionado, setPeriodoSelecionado] = useState("mes");
  const [usuarioSelecionado, setUsuarioSelecionado] = useState<any>(
    perfil.visualiza_todos_contatos_perfil == "0" ? id_usuario : "*"
  );

  const [isLoading, setIsLoading] = useState(true);

  const { colorMode } = useColorContext();

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

  function atualizarAtividades(
    vendedor: string | undefined = undefined,
    periodo: string | undefined = undefined
  ) {
    setIsLoading(true);
    listarVisitasGrafico(vendedor, periodo)
      .then((res: any) => {
        setGroups(res.map((e: any) => e.data));
        setSeries([
          {
            name: "Visitas",
            data: res.map((e: any) => e.quantidade_agendamentos),
          },
        ]);
      })
      .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,
          },
        },
      },
    ],
    yaxis: {
      labels: {
        formatter: (value: any) => {
          return value;
        },
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        // borderRadius: 10,
      },
    },
    xaxis: {
      labels: {
        rotate: -45,
        trim: true,
        hideOverlappingLabels: false,
      },
      categories: groups,
    },
    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 className="inline-flexc hidden md:inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
          <button
            className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
              periodoSelecionado === "dia"
                ? "bg-white shadow-card dark:bg-black"
                : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
            }`}
            onClick={() => {
              setPeriodoSelecionado("dia"),
                atualizarAtividades(usuarioSelecionado, "dia");
            }}
          >
            Dia
          </button>
          <button
            className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
              periodoSelecionado === "semana"
                ? "bg-white shadow-card dark:bg-black"
                : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
            }`}
            onClick={() => {
              setPeriodoSelecionado("semana"),
                atualizarAtividades(usuarioSelecionado, "semana");
            }}
          >
            Semana
          </button>
          <button
            className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
              periodoSelecionado === "mes"
                ? "bg-white shadow-card dark:bg-black"
                : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
            }`}
            onClick={() => {
              setPeriodoSelecionado("mes"),
                atualizarAtividades(usuarioSelecionado, "mes");
            }}
          >
            Mês
          </button>
        </div>
      </div>
      {isLoading ? (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      ) : (
        <ReactApexChart
          options={options}
          series={series}
          type="bar"
          height={350}
        />
      )}
    </div>
  );
};

export default GraficoVisitas;