import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { Flex, Menu, Text } from "@mantine/core";
import { IconBuildingBroadcastTower, IconDoorExit, IconEdit, IconNote, IconPalette, IconPencil, IconUser, IconUsersGroup } from "@tabler/icons-react";
import { DialogsSearch } from "../DialogsSearch/DialogsSearch";
import { useLogout } from "@/app/providers/AccountProvider/useLogout";
import { useHotkeys } from "@mantine/hooks";
import { useNavigate } from "react-router-dom";
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
import { DialogHeaderText } from "../DialogHeaderText/DialogHeaderText";

export function DialogsPanelHeader() {
    const colors = useRosettaColors();
    const logout = useLogout();
    const navigate = useNavigate();
    const publicKey = usePublicKey();
    const viewKeys = window.platform == 'darwin' ? '⌘' : 'Ctrl+';
    const triggerKeys = window.platform == 'darwin' ? 'mod' : 'Ctrl';

    useHotkeys([
        [`${triggerKeys}+L`, () => logout()],
        [`${triggerKeys}+P`, () => navigate('/main/profile/me')],
    ], [], true);

    return (
        <Flex direction={'column'}>
            <Flex direction={'row'} p={'sm'} justify={'space-between'} align={'center'}>
                <Menu withArrow width={150} shadow="md">
                    <Menu.Target>
                        <IconUser style={{
                            cursor: 'pointer'
                        }} stroke={1.3} size={20} color={colors.brandColor}></IconUser>
                    </Menu.Target>
                    <Menu.Dropdown style={{
                        userSelect: 'none'
                    }} fz={'xs'} fw={500}>
                        <Menu.Label>Profile</Menu.Label>
                        <Menu.Item
                            fz={'xs'}
                            onClick={() => navigate('/main/profile/me')}
                            leftSection={<IconPencil color={colors.brandColor} size={14} />}
                            rightSection={
                                <Text size="xs" c="dimmed">
                                {viewKeys}P
                                </Text>
                            }
                            >
                            Edit
                        </Menu.Item>
                        <Menu.Item
                            fz={'xs'}
                            onClick={() => navigate('/main/theme')}
                            leftSection={<IconPalette color={colors.brandColor} size={14} />}
                            >
                            Theme
                        </Menu.Item>                        
                        <Menu.Item
                            fz={'xs'}
                            onClick={logout}
                            leftSection={<IconDoorExit color={colors.error} size={14} />}
                            rightSection={
                                <Text size="xs" c="dimmed">
                                {viewKeys}L
                                </Text>
                            }
                            >
                            Lock
                        </Menu.Item>
                    </Menu.Dropdown>
                </Menu>
                <DialogHeaderText></DialogHeaderText>
                <Menu withArrow width={150} shadow="md">
                    <Menu.Target>
                        <IconEdit style={{
                            cursor: 'pointer'
                        }} stroke={1.3} size={22} color={colors.brandColor}></IconEdit>
                    </Menu.Target>
                    <Menu.Dropdown style={{
                        userSelect: 'none'
                    }} fz={'xs'} fw={500}>
                        <Menu.Label>Write</Menu.Label>
                        <Menu.Item
                            fz={'xs'}
                            onClick={() => navigate('/main/chat/' + publicKey)}
                            leftSection={<IconNote color={colors.brandColor} size={14} />}
                            >
                            Note
                        </Menu.Item>
                        <Menu.Item
                            fz={'xs'}
                            onClick={() => navigate('/main/newgroup')}
                            leftSection={<IconUsersGroup color={colors.brandColor} size={14} />}
                            >
                            Group chat
                        </Menu.Item>  
                        <Menu.Item disabled
                            fz={'xs'}
                            //onClick={() => navigate('/main/chat/' + publicKey)}
                            leftSection={<IconBuildingBroadcastTower color={colors.brandColor} size={14} />}
                            >
                            Channel
                        </Menu.Item>                                               
                    </Menu.Dropdown>
                </Menu>
            </Flex>
            <Flex w={'100%'} justify={'center'} align={'center'} 
                pl={'sm'} pr={'sm'} pb={'xs'}>
                <DialogsSearch></DialogsSearch>
            </Flex>
        </Flex>
    );
}