import { CSSProperties, useContext, useEffect, useState } from "react";
import { PencilSquareIcon } from "@heroicons/react/24/outline";
import { PlusIcon } from "@heroicons/react/24/solid";

import { Table } from "../../components/Table/Table";
import { tableHeaderDataProps } from "../../types/Table";
import { SwitchComponent as Switch } from "../../components/Switch/SwitchComponent";
import { SideModal } from "../../components/SideModal";
import { ProductsAndServicesForms } from "./ProductsAndServicesForms";
import { ModalConfirmAction } from "../../components/ModalConfirmAction";
import { MediaQueryContext } from "../../contexts/MediaQueryProvider";
import { ContainerTable } from "../../components/Table/ContainerTable";
import { Item, Topbar } from "../../components/Table/Topbar";
import { Button } from "../../components/Button";
import { SearchInput } from "../../components/SearchInput";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import Api from "../../helpers/Api";

export const ProductsAndServices = () => {
  const queryClient = useQueryClient();
  const {
    data: productsAndServices,
    isLoading,
    refetch: refetchProductsAndServices,
  } = useQuery({
    queryFn: Api.GetProductsAndServices,
    queryKey: ["productsAndServices"],
  });

  const { mutateAsync: updateProductsAndServicesMutation } = useMutation({
    mutationFn: Api.PutProductsAndServices,
    onMutate: async (newProductOrService) => {
      const queryKey = [
        "productsAndServices",
        newProductOrService.idProdutoEServico,
      ];

      await queryClient.cancelQueries({ queryKey });

      const previousProductOrService = queryClient.getQueryData(queryKey);

      console.log("Antigo", previousProductOrService);

      queryClient.setQueryData(queryKey, newProductOrService);

      return { previousProductOrService, newProductOrService };
    },
    onError: (err, newProductOrService, context) => {
      queryClient.setQueryData(
        ["productsAndServices", context.newProductOrService.idProdutoEServico],
        context.previousProductOrService
      );
    },
    onSettled: (newProductOrService) => {
      console.log('Novo Produto: ', newProductOrService);
      queryClient.invalidateQueries({
        queryKey: [
          "productsAndServices",
          newProductOrService.idProdutoEServico,
        ],
      });
      queryClient.invalidateQueries({ queryKey: ["productsAndServices"] });
    },
  });

  const [filteredProductsAndServices, setFilteredProductsAndServices] =
    useState(productsAndServices);
  const [isSideModalOpen, setIsSideModalOpen] = useState<boolean>(false);
  const [isModalDisableOpen, setIsModalDisableOpen] = useState<boolean>(false);
  const [isSwitchFormsEnabled, setIsSwitchFormsEnabled] =
    useState<boolean>(true);
  const [formType, setFormType] = useState<"Criar" | "Editar">("Criar");

  const [productOrServiceToEdit, setProductOrServiceToEdit] = useState(null);
  const [selectedId, setSelectedId] = useState<number>(null);
  const [search, setSearch] = useState<string>("");

  const { isXSmallScreen, isMobileScreen, isNotebookScreen } =
    useContext(MediaQueryContext);

  useEffect(() => {
    const handleFilterProductsAndServices = (): void => {
      setFilteredProductsAndServices(productsAndServices);
    };
    handleFilterProductsAndServices();
  }, [productsAndServices]);

  const updateData = (data: any[]): void => {
    setFilteredProductsAndServices(data);
  };

  const handleDisable = (): void => {
    if (isEnabled(selectedId)) {
      /* setEnabledDatas(enabledDatas.filter((item) => item !== selectedId)); */
      setSelectedId(null);
      handleCloseModalDisable();
    }
  };

  const handleSwitchChange = async (
    idProdutoEServico: number
  ): Promise<void> => {
    const productOrService = productsAndServices?.find(
      (item) => item.idProdutoEServico === idProdutoEServico
    );

    const { nomeTipoProdutoEServico, ...rest } = productOrService;

    await updateProductsAndServicesMutation({
      ...rest,
      ativo: !productOrService.ativo,
    });
  };

  const isEnabled = (idProdutoEServico: number): boolean => {
    /* return enabledDatas.includes(idProdutoEServico); */
    return true;
  };

  const handleSwitchFormsChange = (): void => {
    setIsSwitchFormsEnabled((prevValue) => !prevValue);
  };

  const handleOpenSideModal = (): void => {
    setFormType("Criar");
    setIsSideModalOpen(true);
  };

  const handleCloseSideModal = (): void => {
    setIsSideModalOpen(false);
    setProductOrServiceToEdit(null);
    setIsSwitchFormsEnabled(true);
  };

  const handleOpenModalDisable = (): void => {
    setIsModalDisableOpen(true);
  };

  const handleCloseModalDisable = (): void => {
    setIsModalDisableOpen(false);
    setSelectedId(null);
  };

  const handleEdit = (idProdutoEServico: number): void => {
    setFormType("Editar");
    setIsSideModalOpen(true);
    const productOrService = productsAndServices?.find(
      (item) => item.idProdutoEServico === idProdutoEServico
    );
    setProductOrServiceToEdit(productOrService);
    setIsSwitchFormsEnabled(productOrService.ativo);
  };

  const headerData: tableHeaderDataProps[] = [
    {
      name: "Produtos e Serviços",
      keyReference: "nome",
      isSortable: true,
      shouldKeepAfterNotebook: true,
      shouldKeepAfterMobile: true,
    },
    {
      name: "Descrição",
      keyReference: "descricao",
      shouldKeepAfterNotebook: true,
    },
    {
      name: "Preço",
      keyReference: "preco",
      isSortable: true,
      shouldKeepAfterNotebook: true,
    },
    {
      name: "Tipo",
      keyReference: "nomeTipoProdutoEServico",
      isSortable: true,
      shouldKeepAfterNotebook: true,
    },
    {
      name: "Situação",
      keyReference: "situation",
      shouldKeepAfterNotebook: true,
      shouldKeepAfterMobile: true,
    },
    {
      name: "Editar",
      keyReference: "edit",
      justifyColumn: "center",
      shouldKeepAfterNotebook: true,
      shouldKeepAfterMobile: true,
    },
  ];

  const bodyData = filteredProductsAndServices?.map((item) => {
    return {
      ...item,
      situation: (
        <Switch
          isChecked={item?.ativo}
          onChange={async () =>
            await handleSwitchChange(item?.idProdutoEServico)
          }
        />
      ),
      edit: (
        <PencilSquareIcon
          width={isXSmallScreen ? "20" : "24"}
          color="#8E8E8E"
          onClick={() => handleEdit(item?.idProdutoEServico)}
          className="actionIcon"
        />
      ),
      isEnabled: item?.ativo,
    };
  });

    const handleSearchChange = (event) => {
    const searchValue = event.target.value;
    setSearch(searchValue);

    const filteredData = productsAndServices?.filter((item) =>
      item["nome"].toLowerCase().includes(searchValue.toLowerCase())
    );

    updateData(filteredData);
  };

  const itemsPerPage = 10;
  const validationName = selectedId
    ? productsAndServices?.find((item) => item.idProdutoEServico === selectedId)
        .nome
    : "";

  const buttonStyles: CSSProperties = {
    maxWidth: "260px",
    width: isMobileScreen ? "40px" : "100%",
    height: "40px",
    padding: isMobileScreen ? "12px" : "10px 20px",
  };

  return (
    <section>
      {!isLoading &&
        productsAndServices &&
        bodyData &&
        productsAndServices.length > 0 && (
          <ContainerTable>
            <Topbar>
              <Item style={{ maxWidth: "432px", width: "100%" }}>
                <SearchInput
                  searchTerm={search}
                  handleSearchChange={() => {}}
                  placeholder="Buscar produtos e serviços"
                />
              </Item>
              <Item>
                <Button
                  shouldRemoveTextInMobile
                  text="Criar produto ou serviço"
                  icon={<PlusIcon width={20} />}
                  customStyles={buttonStyles}
                  onClick={handleOpenSideModal}
                  theme="action"
                />
              </Item>
            </Topbar>
            <Table
              data={productsAndServices}
              updateData={updateData}
              tableHeaderData={headerData}
              tableBodyData={bodyData}
              itemsPerPage={itemsPerPage}
              tableLineStyles={{
                display: "grid",
                gridTemplateColumns: isXSmallScreen
                  ? "50% 25% 25%"
                  : isMobileScreen
                    ? "40% 40% 20%"
                    : isNotebookScreen
                      ? "25% 30% 10% 10% 15% 10%"
                      : "30% 30% 10% 10% 15% 5%",
              }}
            />
          </ContainerTable>
        )}
      {isSideModalOpen && (
        <SideModal
          isOpen={true}
          onRequestClose={handleCloseSideModal}
          isSwitchFormsEnabled={isSwitchFormsEnabled}
          onSwitchFormsChange={handleSwitchFormsChange}
        >
          <ProductsAndServicesForms
            type={formType}
            isSwitchFormsEnabled={isSwitchFormsEnabled}
            onSideModalClose={() => {}}
            refetchProductsAndServices={refetchProductsAndServices}
            productOrServiceToEdit={productOrServiceToEdit}
          />
        </SideModal>
      )}
    </section>
  );
};