import { useMemo } from 'react';

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

import {
    DropdownMenuGroup,
    DropdownMenuItem,
} from '@/components/ui/dropdown-menu';
import {
    changePhoneDialogRef,
} from '@/componentsRoot/ChangePhoneDialog/ChangePhoneDialog';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';
import { useMainPage } from '@/stores/mainPage';

const SidebarProfileItems = () => {

    const isMobile = useAppConfigStore();
    const { profile } = useMainPage();


    /* if (isMobile) {
         return <>
 
             <MobileListItem
                 title={Lang.key('profile')}
                 link
                 chevron={false}
                 media={<User2Icon />}
                 onClick={() => {
                     //  setPopoverOpened(false);
                     //  setMobileMenuOpened(false);
                     // profileDialogRef.current?.open();
                 }}
             />
 
         </>
     }*/

    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 haveLoginField = useMemo(() => {
        return _.findKey(profile?.structure?.items, (item) => item.key === 'login') !== 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(() => {

        //Измем ключ email в структуре профиля
        const emailKey = _.findKey(profile?.structure?.items, (item) => item.key === 'email');
        return emailKey ? profile?.data[emailKey] : null;


    }, [profile])

    return <DropdownMenuGroup >


        {!!login && <DropdownMenuItem

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

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

        >
            <Contact /> {login}


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

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

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


        </DropdownMenuItem> : <DropdownMenuItem
            tooltip={Lang.key('add_email_for_login')}
        >
            <AtSign /> {Lang.key('add_email')}
        </DropdownMenuItem>)}

        {havePhoneField && (!!phone ? <DropdownMenuItem

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

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

        </DropdownMenuItem> : <DropdownMenuItem

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

        <DropdownMenuItem
            tooltip={Lang.key('add_social_login_for_faster_login')}
        ><GlobeIcon /> {Lang.key('add_social_login')}</DropdownMenuItem>


    </DropdownMenuGroup>

}

export default SidebarProfileItems;