import {
    useEffect,
    useRef,
    useState,
} from 'react';

import {
    FaGoogle,
    FaOdnoklassnikiSquare,
    FaVk,
    FaYandex,
} from 'react-icons/fa';
import { SiMaildotru } from 'react-icons/si';

import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    MobileBlock,
    MobileButton,
    MobileList,
    MobileListItem,
    MobilePopover,
} from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import { cn } from '@/lib/utils';
import useAppConfigStore, { useAppConfig } from '@/stores/appConfig';

const SocialIcon = ({ type, mobile = false }: { type: "vk" | "ya" | "google" | "ok" | "mailru", mobile?: boolean }) => {
    switch (type) {
        case 'vk':
            return <FaVk size={mobile ? 20 : 30} className=' text-blue-600' />
        case 'ya':
            return <FaYandex size={20} className=' text-red-600' />
        case 'google':
            return <FaGoogle size={20} className=' text-gray-600' />
        case 'ok':
            return <FaOdnoklassnikiSquare size={20} className=' text-orange-600' />
        case 'mailru':
            return <SiMaildotru size={20} className=' text-blue-600' />
        default:
            return null;
    }
}

const SOCIAL_ICON_TYPES = ['vk', 'ya', 'google', 'ok', 'mailru'] as const;
const ICON_CHANGE_INTERVAL_MS = 4000;
const ICON_TRANSITION_MS = 300;

const AnimationChangeSocIcons = ({ mobile = false }: { mobile?: boolean }) => {
    const [index, setIndex] = useState(0);
    const [visible, setVisible] = useState(true);
    const transitionTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
    useEffect(() => {
        const interval = setInterval(() => {
            setVisible(false);
            transitionTimeoutRef.current = setTimeout(() => {
                setIndex(prev => (prev + 1) % SOCIAL_ICON_TYPES.length);
                setVisible(true);
            }, ICON_TRANSITION_MS);
        }, ICON_CHANGE_INTERVAL_MS);

        return () => {
            clearInterval(interval);
            if (transitionTimeoutRef.current) {
                clearTimeout(transitionTimeoutRef.current);
            }
        };
    }, []);

    const currentType = SOCIAL_ICON_TYPES[index % SOCIAL_ICON_TYPES.length];

    return (
        <span className="inline-flex size-[30px] shrink-0 items-center justify-center">
            <span
                className={cn(
                    'inline-flex items-center justify-center transition-all duration-300 ease-in-out',
                    visible
                        ? 'scale-100 opacity-100 translate-y-0'
                        : 'scale-75 opacity-0 translate-y-1',
                )}
            >
                <SocialIcon mobile={mobile} type={currentType} />
            </span>
        </span>
    );
};

const SocialLoginButtons = ({ onSocAuth }: { onSocAuth: (type: string) => void }) => {
    const { isMobile } = useAppConfigStore();
    const { auth } = useAppConfig();
    const popoverTargetRef = useRef<HTMLDivElement>(null);
    const [popoverOpened, setPopoverOpened] = useState(false);


    if (!auth?.socialLogin) {
        return null;
    }


    if (isMobile) {


        return <>

            <div className='mt-2'>
                <MobileButton
                    roundedIos
                    largeIos
                    outline


                    ref={popoverTargetRef} onClick={() => setPopoverOpened(true)}><span className='mr-2'><AnimationChangeSocIcons mobile /></span> {Lang.key('socialLoginButtons')}</MobileButton>
            </div>
            <MobilePopover
                opened={popoverOpened}
                target={popoverTargetRef.current}
                onBackdropClick={() => setPopoverOpened(false)}
            >
                <MobileList nested>
                    {['vk', 'ya', 'google', 'ok', 'mailru'].map((item) => {
                        return <MobileListItem
                            title={Lang.key('social_' + item)}
                            media={<SocialIcon mobile type={item as any} />}
                            link
                            onClick={() => setPopoverOpened(false)}
                        />
                    })}

                </MobileList>
            </MobilePopover>
        </>
        return <MobileBlock outline> <div className="grid grid-cols-5 gap-2">

            <MobileButton

                outline
                large

                onClick={() => {
                    onSocAuth('vk');
                }}
            >
                <FaVk size={30} className=' text-blue-600' />
            </MobileButton>
            <MobileButton
                outline
                large
                onClick={() => {
                    onSocAuth('ya');
                }}
            >
                <FaYandex size={20} className=' text-red-600' />
            </MobileButton>
            <MobileButton
                outline
                large
                onClick={() => {
                    onSocAuth('google');
                }}
            >
                <FaGoogle size={20} className=' text-gray-600' />
            </MobileButton>
            <MobileButton
                outline
                large
                onClick={() => {
                    onSocAuth('ok');
                }}
            >
                <FaOdnoklassnikiSquare size={20} className=' text-orange-600' />
            </MobileButton>
            <MobileButton
                outline
                large
                onClick={() => {
                    onSocAuth('mailru');
                }}
            >
                <SiMaildotru size={20} className=' text-blue-600' />
            </MobileButton>
        </div>
        </MobileBlock>
    }





    return <>

        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="outline" className='w-full mt-2'>

                    <AnimationChangeSocIcons />



                    {Lang.key('socialLoginButtons')}</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-40" align="start">
                <DropdownMenuGroup>
                    {['vk', 'ya', 'google', 'ok', 'mailru'].map((item) => {
                        return <DropdownMenuItem
                            onClick={() => {
                                onSocAuth(item);
                            }}
                            key={item}>
                            <SocialIcon type={item as any} /> {Lang.key('social_' + item)}
                        </DropdownMenuItem>
                    })}
                </DropdownMenuGroup>

            </DropdownMenuContent>
        </DropdownMenu>
    </>


}

export default SocialLoginButtons;