import {  useState } from 'react';
import React from 'react';
import {Button, Input, Checkbox, Link, Form} from "@heroui/react";
import LoginComponent from '../components/common/LoginComponent';
import RegisterComponent from '../components/common/RegisterComponent';

enum tab{
	login,
	register
}

export default function Login() {
	const [ tabSelected, setTabSelected ] = useState<tab>(tab.login);	
	return (
		<>
			<div className="flex h-full w-full items-center justify-center">
				<div className="flex w-full max-w-sm flex-col gap-4 rounded-large px-8 pb-10 pt-6">
					<p className="pb-4 text-left text-3xl font-semibold">
						Log In
						<span aria-label="emoji" className="ml-2" role="img">
            👋
          </span>
					</p>
					<Form className="flex flex-col gap-4" validationBehavior="native" onSubmit={handleSubmit}>
						<Input
							isRequired
							label="Email"
							labelPlacement="outside"
							name="email"
							placeholder="Enter your email"
							type="email"
							variant="bordered"
						/>
						<Input
							isRequired
							endContent={
								<button type="button" onClick={toggleVisibility}>
									{isVisible ? (
										<Icon
											className="pointer-events-none text-2xl text-default-400"
											icon="solar:eye-closed-linear"
										/>
									) : (
										<Icon
											className="pointer-events-none text-2xl text-default-400"
											icon="solar:eye-bold"
										/>
									)}
								</button>
							}
							label="Password"
							labelPlacement="outside"
							name="password"
							placeholder="Enter your password"
							type={isVisible ? "text" : "password"}
							variant="bordered"
						/>
						<div className="flex w-full items-center justify-between px-1 py-2">
							<Checkbox defaultSelected name="remember" size="sm">
								Remember me
							</Checkbox>
							<Link className="text-default-500" href="#" size="sm">
								Forgot password?
							</Link>
						</div>
						<Button className="w-full" color="primary" type="submit">
							Log In
						</Button>
					</Form>
					<p className="text-center text-small">
						<Link href="#" size="sm">
							Create an account
						</Link>
					</p>
				</div>
			</div>

			<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>
		</>
	)
}
