'use client';

import React, { FC, useState, useEffect } from 'react';
import { Button } from 'antd';
import { styled } from 'styled-components';
import { AuthModal } from '../../Modals/AuthModal';

type HeaderAuthLinksProps = {
    enterTitle: string;
    registerTitle: string;
    separatorClass?: string;
};

const LinkButton = styled(Button)`
    color: #66A5AD !important;
    font-size: 16px !important;
    height: auto !important;
    padding: 0 !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
`;

export const HeaderAuthLinks: FC<HeaderAuthLinksProps> = ({
    enterTitle,
    registerTitle,
    separatorClass = 'b-header__nav__list__line'
}) => {
    const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
    const [mode, setMode] = useState<'enter' | 'register' | 'reset' | 'finish'>('enter');

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

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

    return (
        <>
            <li>
                <LinkButton
                    type="link"
                    onClick={() => onOpen('register')}
                >
                    {registerTitle}
                </LinkButton>
            </li>
            <li>
                <span className={separatorClass}>|</span>
            </li>
            <li>
                <LinkButton
                    type="link"
                    onClick={() => onOpen('enter')}
                >
                    {enterTitle}
                </LinkButton>
            </li>
            <AuthModal
                open={isOpenModal}
                handleCancel={() => setIsOpenModal(false)}
                mode={mode}
                updateMode={setMode}
            />
        </>
    );
};