import { Popover, Card, List, Code, Title, Text, Paper, Group, Flex, Button, Table, ActionIcon } from '@mantine/core';
import { IconFolderSymlink, IconEye, IconX } from '@tabler/icons-react';
import { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHotkeys } from '@mantine/hooks';
import { __ } from '@wordpress/i18n';

const ShortcutPopover = () => {
    const dispatch = useDispatch();
    const [opened, setOpened] = useState(false);

    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);

    return (
        <Popover
            width={500}
            position="bottom-end"
            opened={opened}
            onChange={setOpened}
            withArrow
        >
            <Popover.Target>
                <ActionIcon variant="light" color="#39758D" c="#4D4D4D" radius={"lg"} size={36} aria-label={__('Settings', 'lazytasks-project-task-management')}
                    onClick={() => setOpened((o) => !o)}
                >
                    <IconFolderSymlink size={24} stroke={1.5}/>
                </ActionIcon>
            </Popover.Target>
            <Popover.Dropdown
                style={{
                    border: 'none',
                    backgroundColor: 'transparent',
                    padding: 0,
                }}
            >
                <Card padding="lg" withBorder radius="md" shadow='md'>
                    <Card.Section withBorder inheritPadding py="xs" className="bg-[#FDFDFD] mb-2">
                        <Group justify='space-between' align='center'>
                            {/* <Title order={6}>Keyboard Shortcuts</Title> */}
                            <Text fw={600} size='md'>{__( 'Keyboard Shortcuts', 'lazytasks-project-task-management' )}</Text>
                            <ActionIcon variant='subtle' onClick={() => setOpened(false)} color="gray">
                                <IconX style={{ height: "70%", width: "70%" }} stroke={1.5} />
                            </ActionIcon>
                        </Group>
                    </Card.Section>
                    <Table striped withRowBorders={false} highlightOnHover>
                        <Table.Tbody>
                            <Table.Tr>
                                <Table.Td>{__( 'Inline Task Edit', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">{__('Single Click', 'lazytasks-project-task-management')}</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'View Task Details Drawer', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">{__('Double Click', 'lazytasks-project-task-management')}</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Close Inline Task Popups', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">{__('Press Esc', 'lazytasks-project-task-management')}</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Close Task Details Drawer', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">{__('Press Esc', 'lazytasks-project-task-management')}</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Create New Task', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">Option(⌥)/Alt + N</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Focus Task Search Field', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">Option(⌥)/Alt + F</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Open Project Dropdown', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">Option(⌥)/Alt + P</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Go to Dashboard', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">Option(⌥)/Alt + D</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Go to My Tasks', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">Option(⌥)/Alt + T</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Switch Views (List → Board → Calendar → Gantt)', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">Option(⌥)/Alt + K</Code></Table.Td>
                            </Table.Tr>
                            <Table.Tr>
                                <Table.Td>{__( 'Open Notifications', 'lazytasks-project-task-management' )}</Table.Td>
                                <Table.Td><Code color={"#EBF1F4"} c="black">Option(⌥)/Alt + Shift + N</Code></Table.Td>
                            </Table.Tr>
                        </Table.Tbody>
                    </Table>

                </Card>
            </Popover.Dropdown>
        </Popover>
    );

}
export default ShortcutPopover;