import React, {useState} from "react";
import {
    Button,
    HStack,
    Menu,
    MenuButton,
    MenuItem,
    MenuList,
    Spinner,
    Stack,
    Table,
    Tbody,
    Td,
    Text,
    Thead,
    Tr,
    useToast,
} from "@chakra-ui/react";
import {gql, useMutation, useQuery} from "@apollo/client";
import {formatTimeStamp} from "./../utils/TransformText";
import {ChevronDownIcon} from "@chakra-ui/icons";
import ConfirmDialog from "../Custom/ConfirmDialog";
import TopBar from "./TopBar";

const Data = [
    {
        title: "Learning to stand",
        category: "Category X",
        publish_date: "2021-10-10"
    },
    {
        title: "Learning to stand",
        category: "Category X",
        publish_date: "2021-10-10"
    },
    {
        title: "Learning to stand",
        category: "Category X",
        publish_date: "2021-10-10"
    },
    {
        title: "Learning to stand",
        category: "Category X",
        publish_date: "2021-10-10"
    },
    {
        title: "Learning to stand",
        category: "Category X",
        publish_date: "2021-10-10"
    },
    {
        title: "Learning to stand",
        category: "Category X",
        publish_date: "2021-10-10"
    },
    {
        title: "Learning to stand",
        category: "Category X",
        publish_date: "2021-10-10"
    }
];
export const GET_POSTS = gql`
query {
  posts(order_by: {date: desc}) {
    body
    date
    id
    title
    post_category {
      name
      id
    }
    category_id
  }
}
`;
export const DELETE_POST = gql`mutation ($id: Int!) {
  delete_posts_by_pk(id: $id) {
    id
  }
}
`;
const BlogsTable = (props: any) => {
    const {setIsSelected, setSelectedPost, selectedPost} = props;
    const {
        loading: postsLoading, error: postsError,
        data: postsData
    } = useQuery(GET_POSTS);
    const [isDialogOpen, setDialogOpen] = useState(false);
    const [deletePost] = useMutation(DELETE_POST);
    const toast = useToast();

    function openEditor(post: any) {
        setIsSelected(true);
        setSelectedPost(post);
    }

    if (postsLoading) {
        return <Spinner size='xl' color='#051E61' left="50%" top="20%"
                        position="absolute"/>;
    }
    if (postsError) {
        return <Text>{postsError}</Text>;
    }

    const handleEdit = (post: any) => {
        setIsSelected(true);
        setSelectedPost(post);

    };
    const handleDelete = (post: any) => {
        setDialogOpen(true);
        setSelectedPost(post);
    };

    const deleteCallBack = (isConfirm: boolean) => {
        if (isConfirm) {
            const options = {
                variables: {
                    id: selectedPost.id,
                },
                refetchQueries: [
                    {query: GET_POSTS},
                ]
            };
            deletePost(options).then(data => {
                toast({
                    title: 'Post deleted',
                    status: 'success',
                    duration: 3000,
                    isClosable: true,
                });
            }).catch(error => {
                toast({
                    title: error,
                    status: 'error',
                    duration: 3000,
                    isClosable: true,
                });
            });
        }
        setDialogOpen(false);
    };
    return (
        <Stack m="0 40px" p="20px 0" spacing="50px">
            <TopBar isEditPage={false} title="Blog Posts"/>
            <Stack
                w="100%"
                h="100%"
                alignItems={"center"}
                pb="40px"
                bg="rgba(247, 248, 252, 1)"
            >

                <HStack justifyContent="right" w="100%" px="5%">
                    <Button
                        w="130px"
                        h="46px"
                        color="white"
                        bg="#051E61"
                        fontFamily="MaisonBold"
                        fontSize="14px"
                        fontStyle="normal"
                        fontWeight="700"
                        lineHeight="14px"
                        letterSpacing="0.20000001192092896px"
                        _hover={{bg: "blue.900"}}
                        onClick={() => openEditor(null)}
                    >
                        Create new blog
                    </Button>
                </HStack>
                <Table
                    maxW={"1121px"}
                    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>
                            <Td fontSize="12px" className="Masion-Book" color="#9FA2B4">
                                Category
                            </Td>
                            <Td fontSize="12px" className="Masion-Book" color="#9FA2B4">
                                Title
                            </Td>
                            <Td
                                fontSize="12px"
                                textAlign="center"
                                className="Masion-Book"
                                color="#9FA2B4">
                                Publish Date
                            </Td>
                            <Td
                                fontSize="12px"
                                textAlign="center"
                                className="Masion-Book"
                                color="#9FA2B4">
                                Actions
                            </Td>
                        </Tr>
                    </Thead>
                    <Tbody>
                        {postsData?.posts?.map((item: any) => {
                            return (
                                <Tr
                                    key={item.id}
                                    h="60px"
                                    borderBottom="1px solid"
                                    borderColor="rgba(223, 224, 235, 1)"
                                    cursor="pointer"
                                >
                                    <Td
                                        className="MasionDemi"
                                        textAlign="left"
                                        fontSize="14px"
                                        color="black">
                                        {item.post_category?.name}
                                    </Td>
                                    <Td>
                                        {item.title}
                                    </Td>
                                    <Td
                                        className="interFonts"
                                        textAlign="center"
                                        fontWeight="500"
                                        fontSize="13px"
                                        color="black">
                                        {formatTimeStamp(item.date)}
                                    </Td>
                                    <Td className="interFonts"
                                        textAlign="center"
                                        fontWeight="500"
                                        fontSize="13px"
                                        color="black">
                                        <Menu>
                                            <MenuButton bg="transparent" as={Button} rightIcon={<ChevronDownIcon/>}>
                                                Actions
                                            </MenuButton>
                                            <MenuList>
                                                <MenuItem onClick={() => handleEdit(item)}>Edit</MenuItem>
                                                <MenuItem onClick={() => handleDelete(item)}>Delete</MenuItem>
                                            </MenuList>
                                        </Menu>
                                    </Td>
                                </Tr>
                            );
                        })}
                    </Tbody>
                </Table>
                <ConfirmDialog
                    isOpen={isDialogOpen}
                    callBack={deleteCallBack}
                    confirmText='Are you sure?'
                    cancelBtnText='Cancel'
                    headerText='Delete Post'
                    confirmBtnText='Confirm'
                />
            </Stack>
        </Stack>
    );
};

export default BlogsTable;