import React, {useState} from "react";
import {useMutation, useQuery} from "@apollo/client";
import {Button, 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 {getColumnsWithoutForeignkey, getSinglePrimaryKey,} from "../utils/CustomeTableUtils";
import {underScoreToCapitalize} from "../utils/TransformText";

function BabbuTable(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"
                            border="1px solid "
                            bg="white"
                            borderColor="rgba(223, 224, 235, 1)"
                        >
                            <Thead
                                h="44px"
                                borderBottom="1px solid"
                                borderColor="rgba(223, 224, 235, 1)"
                            >
                                <Tr>
                                    {getColumnsWithoutForeignkey(col).map((item: any) => {
                                        return (
                                            <Th
                                                fontSize="12px"
                                                className="Masion-Book"
                                                color="#9FA2B4"
                                                fontStyle="normal"
                                                fontWeight="400"
                                                lineHeight="16px"
                                                letterSpacing="0.20000000298023224px"
                                                textAlign="left"
                                                textTransform={"capitalize"}
                                                key={item.name}
                                            >
                                                {underScoreToCapitalize(item.name)}
                                            </Th>
                                        );
                                    })}
                                </Tr>
                            </Thead>
                            <Tbody>
                                {data[`${tablename}`].map((item: any) => (
                                    <Tr
                                        h="60px"
                                        borderBottom="1px solid"
                                        borderColor="rgba(223, 224, 235, 1)"
                                        cursor="pointer"
                                    >
                                        {getColumnsWithoutForeignkey(col).map((mycol: any) => {
                                            return (
                                                <Td
                                                    // className="interFonts"
                                                    className="MasionDemi"
                                                    textAlign="left"
                                                    fontSize="14px"
                                                    color="black"
                                                    onClick={() => editRecord(item)}
                                                >
                                                    {item[mycol.name]}
                                                </Td>
                                            );
                                        })}

                                        <Td>
                                            <Button
                                                className="MasionBold"
                                                pt="3px"
                                                textAlign="center"
                                                letterSpacing="0.5px"
                                                color="white"
                                                borderRadius="6px"
                                                w="83px"
                                                h="29px"
                                                bg="rgba(129, 136, 154, 0.8)"
                                                fontSize="11px"
                                            >
                                                ACTIVITY
                                            </Button>
                                        </Td>
                                        <Th className="interFonts" color="black">
                                            <Button
                                                borderRadius="3px"
                                                w="70px"
                                                h="27px"
                                                bg="#6ABD64"
                                                fontWeight="700"
                                                fontSize="13px"
                                                color="white"
                                                disabled={deleteLoading}
                                                onClick={() => {
                                                    deleteRecord(item);
                                                }}
                                            >
                                                Delete
                                            </Button>

                                            {/* </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 BabbuTable;