import React, {useEffect, useState} from 'react'
import LoginImg from '../../assets/bg/login.svg'
import MainLoader from '../loaders/MainLoader'
import {Link, useNavigate} from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
import Label from '../Label'
import TextInput from '../inputs/TextInput'


export default function Signup() {

    const [loading, setLoading] = useState(true)

    const navigate = useNavigate()

    useEffect(() => {
        const timer = setTimeout(() => {
            setLoading(false)
        }, 1000)

        return () => clearTimeout(timer)
    }, [])

    return (
        <div className="h-screen bg-white w-full flex justify-center items-center">
            <div className="h-full w-full bg-white grid sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-8">
                <div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
                    <div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
                        <div className='w-full text-left'>
                            <h1 className="mb-2 text-black text-4xl font-semibold">{process.env.REACT_APP_PANEL_NAME}</h1>
                            <p className='text-black-gray text-base'>Welcome, Please create your account.</p>
                        </div>
                        <form className="w-full text-14 text-left text-black-gray">
                            <div className="w-full flex flex-col gap-4 justify-start items-start">
                                <div className='w-full grid grid-cols-2 gap-8'>
                                    <div className="w-full">
                                        <div className="w-full flex flex-col gap-2">
                                            <Label desc='First Name*'/>
                                            <TextInput type='text' placeholder='Firstname'/>
                                        </div>
                                    </div>
                                    <div className="w-full">
                                        <div className="w-full flex flex-col gap-2">
                                            <Label desc='Last Name*'/>
                                            <TextInput type='text' placeholder='Lastname'/>
                                        </div>
                                    </div>
                                </div>
                                <div className="w-full">
                                    <div className="w-full flex flex-col gap-2">
                                        <Label desc='Email*'/>
                                        <TextInput type='text' placeholder='Email'/>
                                    </div>
                                </div>
                                <div className="w-full">
                                    <div className="w-full flex flex-col gap-2">
                                        <Label desc='User Name*'/>
                                        <TextInput type='text' placeholder='Username'/>
                                    </div>
                                </div>
                                <div className="w-full">
                                    <div className="w-full flex flex-col gap-2">
                                        <Label desc='Password*'/>
                                        <TextInput type='password' placeholder='Password'/>
                                    </div>
                                </div>
                                <div className="w-full text-left">
                                    <div className="flex justify-between items-center">
                                        <div className="flex gap-2">
                                            <input className="form-check-input" type="checkbox" id="gridCheck"/>
                                            <label className="font-semibold form-check-label" htmlFor="gridCheck">
                                                I accept terms & policy of use.
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div className="w-full mt-3">
                                    <button onClick={() => {
                                        navigate(siteLinks.home)
                                    }} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign
                                        Up
                                    </button>
                                </div>
                                <div className="mt-3">
                                    <hr />
                                    <p className='font-medium'>Already have an account ?
                                        <Link to={siteLinks.login}
                                              className='bg-secondary; hover:text-primary font-bold' style={{paddingRight: '10px'}}>
                                            <button className="btn btn-warning text-uppercase">
                                                Sign In
                                            </button>
                                        </Link>
                                    </p>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div
                    className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
                    <div className="w-full">
                        <div className="w-2/3 mx-auto">
                            <img className="w-[80%]" src={LoginImg} alt=""/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}