import React, {
    forwardRef,
    useImperativeHandle,
    useState,
} from 'react';

import _ from 'lodash';
import { XIcon } from 'lucide-react';

import { ShmSocialType } from '@/api/types';
import { useAppConfig } from '@/contexts/AppConfigContext';
import { Lang } from '@/lang/Lang';

import { Badge } from './ui/badge';
import { Button } from './ui/button';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from './ui/dialog';
import { Label } from './ui/label';
import {
    MobileLink,
    MobileNavbar,
    MobilePage,
    MobilePopup,
} from './ui/mobile';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from './ui/tooltip';

type SocialInfoDialogRefProps = {
    open: (params: { social: ShmSocialType }) => void;
}

export const socialInfoDialogRef = React.createRef<SocialInfoDialogRefProps>();

const SocialInfoDialog = forwardRef<SocialInfoDialogRefProps, {}>((props, ref) => {
    const { isMobile } = useAppConfig();
    const [open, setOpen] = useState<boolean>(false);
    const [social, setSocial] = useState<ShmSocialType | null>(null);

    useImperativeHandle(ref, () => ({
        open: (params: { social: ShmSocialType }) => {
            setSocial(params.social);
            setOpen(true);
        },
    }));

    const interests = _.keys(social?.groups ?? {}).filter((key) => {
        let _key = key.toString();
        return key.length > 1;
    });


    const getGenderName = (gender?: string) => {
        if (!gender) return '';
        //Если начинается на m мужской, если на f женский, если на u неопределенный
        if (gender.startsWith('m')) {
            return Lang.key('male');
        }
        if (gender.startsWith('f')) {
            return Lang.key('female');
        }
        return '';
    }

    const content = (
        <>


            {!!social?.profile_id && <div>
                <Label>{Lang.key('social_profile_id')}</Label>
                <div className='text-sm text-gray-500 mx-1'>{social?.profile_id}</div>
            </div>}

            {!!social?.name && <div>
                <Label>{Lang.key('name')}</Label>
                <div className='text-sm text-gray-500 mx-1'>{social?.name}</div>

            </div>
            }
            {!!social?.surname && <div>
                <Label>{Lang.key('surname')}</Label>
                <div className='text-sm text-gray-500 mx-1'>{social?.surname}</div>
            </div>}
            {!!social?.mail && <div>
                <Label>{Lang.key('mail')}</Label>
                <div className='text-sm text-gray-500 mx-1'>{social?.mail}</div>
            </div>}
            {!!social?.gender && <div>
                <Label>{Lang.key('gender')}</Label>
                <div className='text-sm text-gray-500 mx-1'>{getGenderName(social?.gender)}</div>
            </div>}
            {!!interests.length && <div>
                <Label>{Lang.key('interests')}</Label>
                {interests.map((e, index) => {

                    if (index > 10) return null;

                    return <Badge variant={"outline"} key={e}>{e}</Badge>
                })}
                {interests.length > 10 && <Tooltip>
                    <TooltipTrigger asChild>
                        <Badge variant={"outline"}>+{interests.length - 10}</Badge>
                    </TooltipTrigger>
                    <TooltipContent className='max-w-[400px]'>
                        {interests.join(', ')}
                    </TooltipContent>
                </Tooltip>}
            </div>}


        </>
    );

    if (isMobile) {
        return (
            <MobilePopup opened={open} onBackdropClick={() => setOpen(false)}>
                <MobilePage>
                    <MobileNavbar
                        title={!!social?._id && Lang.key('social_' + (social.type ?? social.soc))}
                        right={<MobileLink onClick={() => setOpen(false)}><XIcon /></MobileLink>}
                    />
                    {content}
                </MobilePage>
            </MobilePopup>
        );
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>{!!social?._id && Lang.key('social_' + (social.type ?? social.soc))}</DialogTitle>
                </DialogHeader>

                {content}
                <DialogFooter>
                    <Button onClick={() => setOpen(false)} variant="outline">{Lang.key('close')}</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
});

export default SocialInfoDialog;
