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

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

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_NETWORK_TYPES.length);
                setVisible(true);
            }, ICON_TRANSITION_MS);
        }, ICON_CHANGE_INTERVAL_MS);

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

    const currentType = SOCIAL_NETWORK_TYPES[index % SOCIAL_NETWORK_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>
                        {SOCIAL_NETWORK_TYPES.map((item) => (
                            <MobileListItem
                                key={item}
                                title={Lang.key('social_' + item)}
                                media={<SocialIcon mobile type={item} />}
                                link
                                onClick={() => {
                                    setPopoverOpened(false);
                                    onSocAuth(item);
                                }}
                            />
                        ))}
                    </MobileList>
                </MobilePopover>
            </>
        );
    }

    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>
                    {SOCIAL_NETWORK_TYPES.map((item) => (
                        <DropdownMenuItem
                            onClick={() => onSocAuth(item)}
                            key={item}
                        >
                            <SocialIcon type={item} /> {Lang.key('social_' + item)}
                        </DropdownMenuItem>
                    ))}
                </DropdownMenuGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    );
};

export default SocialLoginButtons;
