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

import { XIcon } from 'lucide-react';

import { ShmSocialType } from '@/api/types';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
    MobileLink,
    MobileNavbar,
    MobilePage,
    MobilePopup,
} from '@/components/ui/mobile';
import { SystemWindowDialog } from '@/components/ui/system-window-dialog';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';

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

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

const SocialInfoDialog = forwardRef<SocialInfoDialogRefProps, {}>((_, ref) => {
    const { isMobile } = useAppConfigStore();
    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 = Object.keys(social?.groups ?? {}).filter((key) => key.length > 1);

    const getGenderName = (gender?: string) => {
        if (!gender) return '';
        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: string, index: number) => {
                        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 (
        <SystemWindowDialog
            open={open}
            onOpenChange={setOpen}
            title={!!social?._id ? Lang.key('social_' + (social.type ?? social.soc)) : undefined}
            width={560}
            footer={
                <Button onClick={() => setOpen(false)} variant="outline">
                    {Lang.key('close')}
                </Button>
            }
        >
            {content}
        </SystemWindowDialog>
    );
});

export default SocialInfoDialog;
