import { Controller, useForm } from 'react-hook-form';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';
import _ from '@lodash';
import Paper from '@mui/material/Paper';
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
import AvatarGroup from '@mui/material/AvatarGroup';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { useState } from 'react';
import JwtLoginTab from './tabs/JwtSignInTab';
import FirebaseSignInTab from './tabs/FirebaseSignInTab';

/**
 * Form Validation Schema
 */

const tabs = [
	{
		id: 'jwt',
		title: 'JWT',
		logo: 'assets/images/logo/jwt.svg',
		logoClass: 'h-40 p-4 bg-black rounded-12'
	},
	{
		id: 'firebase',
		title: 'Firebase',
		logo: 'assets/images/logo/firebase.svg',
		logoClass: 'h-40'
	}
];


function SignInPage() {
	const [selectedTabId, setSelectedTabId] = useState(tabs[0].id);

	function handleSelectTab(id: string) {
		setSelectedTabId("jwt");
	}

	return (
		<div className="flex min-w-0 flex-auto flex-col justify-center items-center sm:justify-center md:p-32">
			<Paper className="flex min-h-full w-full overflow-hidden justify-center items-center rounded-0 sm:min-h-auto sm:w-auto sm:rounded-2xl sm:shadow md:w-full md:max-w-6xl">
				<div className="w-full px-16 py-32 ltr:border-r-1 rtl:border-l-1 sm:w-auto sm:p-48 md:p-64">
					<div className="mx-auto w-full max-w-320 sm:mx-0 sm:w-320">
						<img
							className="w-48"
							src="assets/images/logo/logo1.svg"
							alt="logo"
						/>

						<Typography className="mt-32 text-4xl font-extrabold leading-tight tracking-tight">
							Iniciar Sesión
						</Typography>
						<div className="mt-2 flex items-baseline font-medium">
							<Typography>Aún no tienes cuenta?</Typography>
							<Link
								className="ml-4"
								to="/sign-up"
							>
								Regístrate
							</Link>
						</div>

						{/* <Tabs
						value={_.findIndex(tabs, { id: selectedTabId })}
						variant="fullWidth"
						className="w-full mt-24 mb-32"
						indicatorColor="secondary"
					>
						{tabs.map((item) => (
							<Tab
								onClick={() => handleSelectTab(item.id)}
								key={item.id}
								icon={
									<img
										className={item.logoClass}
										src={item.logo}
										alt={item.title}
									/>
								}
								className="min-w-0"
								label={item.title}
							/>
						))}
					</Tabs> */}
						{selectedTabId === 'jwt' && <JwtLoginTab />}

						{/* 					{selectedTabId === 'firebase' && <FirebaseSignInTab />} */}

					</div>
				</div>

				<Box
					className="relative hidden h-auto justify-center items-center flex-auto p-64 md:flex lg:px-112"
					sx={{ backgroundColor: 'primary.main' }}>
					<svg
						className="pointer-events-none absolute inset-0"
						viewBox="0 0 960 540"
						width="100%"
						height="100%"
						preserveAspectRatio="xMidYMax slice"
						xmlns="http://www.w3.org/2000/svg"
					>
						<Box
							component="g"
							sx={{ color: 'primary.light' }}
							className="opacity-20"
							fill="none"
							stroke="currentColor"
							strokeWidth="100"
						>
							<circle
								r="234"
								cx="796"
								cy="23"
							/>
						</Box>
					</svg>
					<Box
						component="svg"
						className="absolute -right-64 -top-64 opacity-20"
						sx={{ color: 'primary.light' }}
						viewBox="0 0 220 192"
						width="220px"
						height="192px"
						fill="none"
					>
						<defs>
							<pattern
								id="837c3e70-6c3a-44e6-8854-cc48c737b659"
								x="0"
								y="0"
								width="20"
								height="20"
								patternUnits="userSpaceOnUse"
							>
								<rect
									x="0"
									y="0"
									width="4"
									height="4"
									fill="currentColor"
								/>
							</pattern>
						</defs>
						<rect
							width="220"
							height="192"
							fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
						/>
					</Box>

					<div className="relative z-10 w-full max-w-2xl">
						<img
							className="w-216 "
							src="assets/images/empresa/logoAlphaWC.svg"
							alt="logo"
						/>
						<div className="text-3xl font-bold leading-loose text-gray-100">
							<div>Bienvenido al sistema que se encarga de tu facturación electrónica.</div>
						</div>
						<div className="flex items-center mt-14 text-md leading-none text-gray-400">
							<div>¿Necesitas ayuda? Comunícate con nosotros.</div>
						</div>
						<div className="flex overflow-hidden items-center mt-4 text-md leading-none text-gray-400">
							<div>Soporte técnico: 0967722226</div>
							<a aria-label="Chat WhatsApp" href="https://wa.me/967722226/?text=Hola!%20Necesito%20ayuda%20en%20el%20sistema%20de%20facturación">
								<img className='w-52' alt="Chat WhatsApp" src="assets/images/logo/WhatsApp-Logo.wine.svg" />
							</a>
						</div>
						<div className="flex overflow-hidden mt-2 text-md leading-none text-gray-400">
							<div>Correo eletrónico: info@qsoftec.com</div>
						</div>

					</div>
				</Box>
			</Paper>
		</div>
	);
}

export default SignInPage;