import {  useState } from 'react';
import React from 'react';
import LoginComponent from '../components/common/LoginComponent';
import RegisterComponent from '../components/common/RegisterComponent';

enum tab{
	login,
	register
}

export default function LoginRegisterPage() {
	const [ tabSelected, setTabSelected ] = useState<tab>(tab.login);	
	return (
		<div className='row d-flex vh-100 justify-content-center align-items-center bg-light'>
			<div className='col col-xl-3 card p-0'>
                <div className='card-header'>
                    <ul className="nav nav-underline">
                        {
                            React.Children.toArray(
                                [
                                    { type:tab.login, name: 'Вход' },
                                    { type:tab.register, name: 'Регистрация' },
                                ].map((tab) => 
                                    <li className='user-select-none nav-item' >
                                        <a className={'nav-link' + (tab.type == tabSelected ? ' active' : '')} onClick={() => setTabSelected(tab.type)}>{tab.name}</a>
                                    </li>
                                )
                            )
                        }
                    </ul>
                </div>
                <div className='card-body mt-2'>
                    {tabSelected == tab.login &&
                        <>
                            <LoginComponent />
                        </>
                    }
                    {tabSelected == tab.register &&
                        <RegisterComponent onAfterRegister={() => setTabSelected(tab.login)} />
                    }
                </div>
            </div>
		</div>
	)
}
