import { AccountBase } from "@/app/providers/AccountProvider/AccountProvider";
import { useAccountProvider } from "@/app/providers/AccountProvider/useAccountProvider";
import { Avatar, Box, Flex, Popover, Text } from "@mantine/core";
import { UserAccountSelect } from "../UserAccountSelect/UserAccountSelect";
import { IconPlus } from "@tabler/icons-react";
import { modals } from "@mantine/modals";
import { useNavigate } from "react-router-dom";
import { useState } from "react";

interface DiceDropdownProps {
    children: React.ReactNode;
    onClick?: (accountBase: AccountBase) => void;
    selectedPublicKey?: string;
}

export function DiceDropdown(props: DiceDropdownProps) {
    const { allAccounts } = useAccountProvider();
    const navigate = useNavigate();
    const [opened, setOpened] = useState(false);

    const createAccount = () => {
        modals.openConfirmModal({
            title: 'Create account',
            centered: true,
            children: (
                <Text size="sm">
                    You may be create new account or import existing
                </Text>
            ),
            withCloseButton: false,
            labels: { confirm: 'Create new', cancel: "Import" },
            cancelProps: {
                autoFocus: false,
                style: {
                    outline: 'none'
                }
            },
            onCancel: () => {
                navigate("/exists-seed");
            },
            onConfirm: () => {
                navigate("/create-seed");
            }
        });
    }

    return (
        <Popover transitionProps={{
            transition: 'pop-top-right'
        }} withArrow opened={opened} onChange={setOpened} closeOnEscape closeOnClickOutside width={150}>
            <Popover.Target>
                <Box onClick={() => setOpened(!opened)}>
                    {props.children}
                </Box>
            </Popover.Target>
            <Popover.Dropdown p={0}>
                <Box style={{
                    maxHeight: 300,
                    overflowY: 'auto'
                }}>
                    {allAccounts.map((accountBase: AccountBase) => {
                        return (<UserAccountSelect
                            key={accountBase.publicKey}
                            accountBase={accountBase}
                            selected={props.selectedPublicKey == accountBase.publicKey}
                            onClick={() => {
                                if (props.onClick) {
                                    props.onClick(accountBase);
                                }
                                setOpened(false);
                            }}></UserAccountSelect>)
                    })}
                    <Flex direction={'row'} style={{
                        cursor: 'pointer'
                    }} onClick={() => {
                        createAccount();
                        setOpened(false);
                    }} pl={'xs'} pr={'xs'} pt={10} pb={10} gap={'xs'} align={'center'}>
                        <Avatar size={20} color="green">
                            <IconPlus size={14} />
                        </Avatar>
                        <Flex direction={'column'}>
                            <Text fw={500} size="xs">New account</Text>
                        </Flex>
                    </Flex>
                </Box>
            </Popover.Dropdown>
        </Popover>
    );
}