import { useMemo } from 'react';

import parsePhoneNumber from 'libphonenumber-js';
import _ from 'lodash';
import {
    AtSign,
    Contact,
    Phone,
} from 'lucide-react';

import {
    DropdownMenuGroup,
    DropdownMenuItem,
} from '@/components/ui/dropdown-menu';
import {
    MenubarGroup,
    MenubarItem,
} from '@/components/ui/menubar';
import { MobileListItem } from '@/components/ui/mobile';
import {
    changeEmailDialogRef,
} from '@/componentsRoot/ChangeEmailDialog/ChangeEmailDialog';
import {
    changePhoneDialogRef,
} from '@/componentsRoot/ChangePhoneDialog/ChangePhoneDialog';
import { Lang } from '@/lang/Lang';
import { useMainPage } from '@/stores/mainPage';

import ProfileSocialItems from './ProfileSocialItems';

type SidebarProfileItemsProps = {
    variant?: 'dropdown' | 'menubar' | 'mobile';
    onMobileAction?: () => void;
};

const SidebarProfileItems = ({ variant = 'dropdown', onMobileAction }: SidebarProfileItemsProps) => {
    const { profile } = useMainPage();
    const isMenubar = variant === 'menubar';
    const isMobile = variant === 'mobile';
    const MenuItem = isMenubar ? MenubarItem : DropdownMenuItem;
    const MenuGroup = isMenubar ? MenubarGroup : DropdownMenuGroup;

    const haveEmailField = useMemo(() => {
        return _.findKey(profile?.structure?.items, (item) => item.key === 'email') !== undefined;
    }, [profile])

    const havePhoneField = useMemo(() => {
        return _.findKey(profile?.structure?.items, (item) => item.key === 'phone') !== undefined;
    }, [profile])

    const login = useMemo(() => {

        const loginKey = _.findKey(profile?.structure?.items, (item) => item.key === 'login');
        return loginKey ? profile?.data[loginKey] : null;

    }, [profile])

    const phone = useMemo(() => {
        const phoneKey = _.findKey(profile?.structure?.items, (item) => item.key === 'phone');
        let _phone = phoneKey ? profile?.data[phoneKey] : null;
        if (_phone) {
            let phoneNumber = parsePhoneNumber('+' + _phone);

            return !phoneNumber ? '+' + _phone : phoneNumber.formatInternational()
        }
        return null;
    }, [profile])

    const email = useMemo(() => {

        const emailKey = _.findKey(profile?.structure?.items, (item) => item.key === 'email');
        return emailKey ? profile?.data[emailKey] : null;


    }, [profile])

    const openEmailDialog = () => {
        onMobileAction?.();
        changeEmailDialogRef.current?.open();
    };

    const openPhoneDialog = () => {
        onMobileAction?.();
        changePhoneDialogRef.current?.open();
    };

    if (isMobile) {
        return <>
            {!!login && <MobileListItem
                title={login}
                //     subtitle={Lang.key('your_login')}
                media={<Contact size={20} />}
                chevron={false}
            />}
            {haveEmailField && (!!email ? <MobileListItem
                title={email}
                //     subtitle={Lang.key('your_email')}
                media={<AtSign size={20} />}
                link
                chevron={false}
                onClick={openEmailDialog}
            /> : <MobileListItem
                title={Lang.key('add_email')}
                //   subtitle={Lang.key('add_email_for_login')}
                media={<AtSign size={20} />}
                link
                chevron={false}
                onClick={openEmailDialog}
            />)}
            {havePhoneField && (!!phone ? <MobileListItem
                title={phone}
                //     subtitle={Lang.key('your_phone')}
                media={<Phone size={20} />}
                link
                chevron={false}
                onClick={openPhoneDialog}
            /> : <MobileListItem
                title={Lang.key('add_phone')}
                //     subtitle={Lang.key('add_phone_for_login')}
                media={<Phone size={20} />}
                link
                chevron={false}
                onClick={openPhoneDialog}
            />)}
            <ProfileSocialItems variant="mobile" onMobileAction={onMobileAction} />
        </>;
    }

    return <MenuGroup>


        {!!login && <MenuItem

            onClick={() => {
                //ef.current?.open();
            }}

            tooltip={Lang.key('your_login')}

        >
            <Contact /> {login}


        </MenuItem>}
        {haveEmailField && (!!email ? <MenuItem

            onClick={() => {
                changeEmailDialogRef.current?.open();
            }}

            tooltip={Lang.key('your_email')}
        >
            <AtSign /> {email}


        </MenuItem> : <MenuItem
            onClick={() => {
                changeEmailDialogRef.current?.open();
            }}
            tooltip={Lang.key('add_email_for_login')}
        >
            <AtSign /> {Lang.key('add_email')}
        </MenuItem>)}

        {havePhoneField && (!!phone ? <MenuItem

            onClick={() => {
                changePhoneDialogRef.current?.open();
            }}

            tooltip={Lang.key('your_phone')}
        >
            <Phone /> {phone}

        </MenuItem> : <MenuItem

            onClick={() => {
                changePhoneDialogRef.current?.open();
            }}
            tooltip={Lang.key('add_phone_for_login')}
        >
            <Phone /> {Lang.key('add_phone')}
        </MenuItem>)}

        <ProfileSocialItems variant={variant} />


    </MenuGroup>

}

export default SidebarProfileItems;
