import React, {useState} from "react";
import {useMutation, useQuery} from "@apollo/client";
import {Button, IconButton, Table, Tbody, Td, Text, Th, Thead, Tr, useToast,} from "@chakra-ui/react";

import CustomEditModal from "./CustomEditModal";
import {deleteRecordByPrimaryKey, getSearchQuery,} from "../utils/GenericQueries";
import {Stack} from "@chakra-ui/layout";
import {DeleteIcon} from "@chakra-ui/icons";
import {getColumnsWithoutForeignkey, getSinglePrimaryKey,} from "../utils/CustomeTableUtils";
import {underScoreToCapitalize} from "../utils/TransformText";

function CustomTable(props: any) {
    const toast = useToast();

    const {isModal, title, tablename, col} = props;
    const searchQuery = getSearchQuery(tablename, col);
    const {loading, error, data, refetch} = useQuery(searchQuery);

    const [formdata, setFormData] = useState(null);

    //delete row
    const [deleteRow, {loading: deleteLoading}] = useMutation(
        deleteRecordByPrimaryKey(tablename, col)
    );

    //modal
    const [isAddEdit, setIsAddEdit] = useState(false);

    const [isUpdate, setIsUpdate] = useState(false);

    const addRecord = () => {
        let item: any = {};
        for (let i = 0; i < col.length; i++) {
            item[col[i].name] = "";
        }
        setFormData(item);
        setIsUpdate(false);
        setIsAddEdit(true);
    };

    const editRecord = (item: any) => {
        setFormData(item);
        setIsUpdate(true);
        setIsAddEdit(true);
    };

    const deleteRecord = (item: any) => {
        if (deleteLoading) {
            return;
        }

        let primaryKey = getSinglePrimaryKey(col);
        let deleteObj = {
            [primaryKey]: item[primaryKey],
        };
        let confirm = window.confirm("Are you sure?");

        if (confirm) {
            deleteRow({
                variables: deleteObj,
            })
                .then((r) => {
                    refetch();
                })
                .catch((e) => {
                    console.log("error ", e);
                    toast({
                        title: "Error",
                        description: e.message,
                        status: "error",
                        duration: 9000,
                        isClosable: true,
                    });
                });
        }
    };

    if (loading) {
        return <div>Loading...</div>;
    }
    if (error) {
        console.log("error ", error);

        return <div>Error...</div>;
    }

    if (data)
        return (
            <>
                {isAddEdit == false ? (
                    <Stack>
                        <Stack isInline justify={"space-between"}>
                            <Text fontWeight="700" className="interFonts" fontSize="17px">
                                {title}
                            </Text>
                            <Stack isInline>
                                <Button
                                    onClick={() => {
                                        addRecord();
                                    }}
                                    fontWeight="700"
                                    fontSize="12px"
                                    color="white"
                                    border="1px"
                                    className="interFonts"
                                    w="76px"
                                    h="28px"
                                    bg="#009CC4"
                                    alignSelf="flex-end"
                                    borderRadius="2.89px"
                                    _hover={{
                                        color: "#009CC4",
                                        bg: "white",
                                        border: "1px solid #009CC4",
                                    }}
                                >
                                    Create
                                </Button>
                            </Stack>
                        </Stack>

                        {/* <Table variant={"striped"}>
                          <Thead>
                              <Tr>
                                  {getColumnsWithoutForeignkey(col).map((item: any) => {
                                      return <Th key={item.name}>{underScoreToCapitalize(item.name)}</Th>
                                  })}
                              </Tr>
                          </Thead>
                          <Tbody>
                              {data[`${tablename}`].map((item: any) => (
                                  <Tr
                                      cursor={"pointer"}
                                  >
                                      {getColumnsWithoutForeignkey(col).map((mycol: any) => {
                                          return <Td onClick={() => editRecord(item)}>{item[mycol.name]}</Td>
                                      })}
                                      <Th>
                                          <IconButton
                                              disabled={deleteLoading}
                                              onClick={() => {
                                                  deleteRecord(item)
                                              }}
                                              variant="outline"
                                              colorScheme="red.200"
                                              ml={2}
                                              size="xs"
                                              icon={<DeleteIcon/>}
                                              aria-label={'Delete'}
                                          />
                                      </Th>

                                  </Tr>
                              ))}
                          </Tbody>
                      </Table> */}

                        <Table size="sm" variant="none" bgColor="#F3F4F8">
                            <Thead h="35px" borderBottom="1px solid" borderColor="#D9E2EC">
                                <Tr fontWeight="500" fontSize="11px" className="interFonts">
                                    {getColumnsWithoutForeignkey(col).map((item: any) => {
                                        return (
                                            <Th
                                                borderRight="2px solid #D9E2EC"
                                                color="#626D85"
                                                key={item.name}
                                            >
                                                {underScoreToCapitalize(item.name)}
                                            </Th>
                                        );
                                    })}
                                </Tr>
                            </Thead>
                            <Tbody>
                                {data[`${tablename}`].map((item: any) => (
                                    <Tr
                                        h="50px"
                                        borderBottom="1px solid"
                                        borderColor="#D9E2EC"
                                        fontWeight="500"
                                        fontSize="11px"
                                        className="interFonts"
                                        cursor="pointer"
                                    >
                                        {getColumnsWithoutForeignkey(col).map((mycol: any) => {
                                            return (
                                                <Td color="black" onClick={() => editRecord(item)}>
                                                    {item[mycol.name]}
                                                </Td>
                                            );
                                        })}
                                        <Th>
                                            <IconButton
                                                disabled={deleteLoading}
                                                onClick={() => {
                                                    deleteRecord(item);
                                                }}
                                                variant="outline"
                                                colorScheme="red.200"
                                                ml={2}
                                                size="xs"
                                                icon={<DeleteIcon/>}
                                                aria-label={"Delete"}
                                            />
                                        </Th>
                                    </Tr>
                                ))}
                            </Tbody>
                        </Table>
                    </Stack>
                ) : (
                    <CustomEditModal
                        title={title}
                        open={isAddEdit}
                        tablename={tablename}
                        col={col}
                        isUpdate={isUpdate}
                        formdata={formdata}
                        isModal={isModal}
                        close={() => setIsAddEdit(false)}
                        refetch={() => {
                            setIsAddEdit(false);
                            refetch();
                        }}
                    />
                )}
            </>
        );
    return <div>No Data</div>;
}

export default CustomTable;