import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
import { useContext, useState } from "react"
import { useForm } from "react-hook-form"
import GlobalStateContext from "../Contexts/GlobalStateContext"
import logo from '../assets/logo.svg'
import { Button } from "../components/ui/button"
import { Field } from "../components/ui/field"
import { Toaster, toaster } from "../components/ui/toaster"

interface FormValues {
  mobileNumber: number
}

const Login = () => {

  const [isLoading, setIsLoading] = useState<boolean>(false)
  const context = useContext(GlobalStateContext);
  if (!context) {
    throw new Error('App must be used within a GlobalStateProvider');
  }
  const { setIsAuthenticate } = context;
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>()


  const onSubmit = handleSubmit((data) => {
    setIsLoading(true)
    if (data?.mobileNumber === 1234567890) {
      setTimeout(() => {
        setIsAuthenticate(true);
        setIsLoading(false)
      }, 3000); // 3-second delay

    } else {
      toaster.create({
        title: `Invalid Credentials`,
        type: "error",
      })
      setIsLoading(false)
    }
  });


  return (


    <VStack
      w={'100%'} h={'100vh'} bg={'#ffffff'}  >

      <HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8}  h={'7%'} justifyContent={'flex-start'}>
      <Image w={50} src={logo} />

      </HStack>


      <HStack
        w={'100%'} h={'93%'} p={8} gap={8}>




        <Center display={{ base: 'none', md: 'flex' }} bg={'#02A0A033'} w={'50%'} h={'100%'} rounded={'3xl'}>
          <Image w={250} src={logo} />
        </Center>





        <Center as={'form'} onSubmit={onSubmit} p={{ base: 4, md: 16 }} w={{ base: '100%', md: '50%' }} h={'100%'}>
          <VStack gap={2} w={'100%'} alignItems={'flex-start'}>
            <Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'normal'} color={'#313039'}>LOGIN</Text>

            <VStack mt={6} gap={4} w={'full'}>
              <Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
                <Input ps={3} {...register("mobileNumber", { required: "Mobile Number address is required" })} placeholder="Mobile Number Address" />
                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text> */}
              </Field>
              <Button loading={isLoading} mt={4} size={'sm'} bg={'#02A0A0'} rounded={'md'} w={'100%'} color={'#ffffff'} type="submit">Send OTP</Button>

              <Text>Forgot password</Text>
            </VStack>


          </VStack>
        </Center>
        <Toaster />
      </HStack>
    </VStack>
  )
}

export default Login