'use client'

import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import { useSelectedLayoutSegment } from 'next/navigation';
import { Link } from '../../../i18n/routing';
import { AUTH_TOKEN_KEY } from '../../../constants/common';
import { useLocalStorage } from '../../../hooks/useLocalStorage';
import { AuthModal } from '../../Modals/AuthModal';
import { i18nText } from '../../../i18nKeys';

type HeaderAuthLinksProps = {
    locale: string;
    separatorClass?: string;
};

function HeaderAuthLinks ({
    locale,
    separatorClass = 'b-header__nav__list__line'
}: HeaderAuthLinksProps) {
    const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
    const [mode, setMode] = useState<'enter' | 'register' | 'reset' | 'finish'>('enter');
    const selectedLayoutSegment = useSelectedLayoutSegment();
    const pathname = selectedLayoutSegment || '';
    const [token, setToken] = useLocalStorage(AUTH_TOKEN_KEY, '');
    const [isPayPath, setIsPayPath] = useState<boolean>(false);

    const onOpen = (mode: 'enter' | 'register' | 'reset' | 'finish') => {
        setMode(mode);
        setIsOpenModal(true);
    };

    const handleAuthRegister = () => {
        setIsPayPath(true);
        onOpen('register');
    };

    const handleAuthEnter = () => {
        setIsPayPath(true);
        onOpen('enter');
    };

    useEffect(() => {
        document.addEventListener('show_auth_register', handleAuthRegister);
        document.addEventListener('show_auth_enter', handleAuthEnter);
        return () => {
            document.removeEventListener('show_auth_register', handleAuthRegister);
            document.removeEventListener('show_auth_enter', handleAuthEnter);
        };
    }, []);

    useEffect(() => {
        if (!isOpenModal) {
            setMode('enter');
        }
    }, [isOpenModal]);

    useEffect(() => {
        if (token && isPayPath) {
            const showPayForm = new Event('show_pay_form');
            document.dispatchEvent(showPayForm);
        }
    }, [token]);

    const addNewEvent = (name: 'show_auth_register' | 'show_auth_enter') => {
        const evt = new Event(name);
        document.dispatchEvent(evt);
    };

    return token
        ? (
            <li>
                <Link href={'/account/sessions' as any} className={pathname === 'account' ? 'active' : ''}>
                    {i18nText('account', locale)}
                </Link>
            </li>
        )
        : (
            <>
                <li>
                    <Button
                        className="b-header__auth"
                        type="link"
                        onClick={() => addNewEvent('show_auth_register')}
                    >
                        {i18nText('registration', locale)}
                    </Button>
                </li>
                <li>
                    <span className={separatorClass}>|</span>
                </li>
                <li>
                    <Button
                        className="b-header__auth"
                        type="link"
                        onClick={() => addNewEvent('show_auth_enter')}
                    >
                        {i18nText('enter', locale)}
                    </Button>
                </li>
                <AuthModal
                    open={isOpenModal}
                    handleCancel={() => setIsOpenModal(false)}
                    mode={mode}
                    updateMode={setMode}
                    updateToken={setToken}
                    locale={locale}
                />
            </>
    );
}

export default HeaderAuthLinks;
