import { resetPassword } from '@/api/Auth'
import PageNotFound from '@/pages/NotFound/NotFound'
import { requirementsPassword } from '@/rtk/helpers/variables'
import { Button, Image, PasswordInput, Stack, TextInput } from '@mantine/core'
import { notifications } from '@mantine/notifications'
import axios from 'axios'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import PasswordRequirementInput from '../PasswordRequirementInput/PasswordRequirementInput'
import classes from './ResetPassword.module.css'

const ResetPassword = () => {
  const queryString: string = window.location.search
  const urlParams = new URLSearchParams(queryString)
  const email: string = urlParams.get('email')!
  const code: string = urlParams.get('code')!
  const [data, setData] = useState({
    email: email,
    forgot_code: code,
    new_password: '',
    confirm_password: '',
  })

  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()
  const passwordRegex =
    /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/

  const handleSubmit = async () => {
    try {
      if (
        data.new_password !== '' &&
        passwordRegex.test(data.new_password) &&
        data.new_password === data.confirm_password
      ) {
        setLoading(true)
        const res = await axios.post(resetPassword, data)
        if (res.data.status) {
          notifications.show({
            title: 'Success',
            message: 'Reset password success!',
            color: 'green',
          })
          navigate('/login')
        } else {
          notifications.show({
            title: 'Error',
            message: res.data.mess,
            color: 'red',
          })
        }
      } else {
        notifications.show({
          title: 'Error',
          message: 'Can not submit',
          color: 'red',
        })
      }

      setLoading(false)
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (error: any) {
      console.log(error)
      if (error.response.status === 422) {
        const errorMess = error.response.data.message
        notifications.show({
          title: 'Error',
          message: errorMess,
          color: 'red',
        })
      }
      setLoading(false)
    }
  }
  if (email === null || code === null) {
    return <PageNotFound />
  } else {
    return (
      <div
        style={{
          backgroundImage: 'url(/backgroundLogin.png)',
          backgroundSize: 'cover',
          height: '100vh',
          paddingTop: '10%',
        }}
      >
        <Stack className={classes.resetForm} w={'400px'} m={'auto'} p={30}>
          <>
            <Image src="/logo.jpg" w={'50%'} m={'auto'}></Image>
            <TextInput
              label="Email"
              placeholder="hello@mantine.dev"
              value={email}
              radius="md"
              disabled
            />
            <PasswordRequirementInput
              requirements={requirementsPassword}
              value={data}
              setValue={setData}
              label="New password"
              placeholder="New password"
              name="new_password"
            />
            <PasswordInput
              required
              label="Confirm password"
              placeholder="Your password"
              value={data.confirm_password}
              onChange={(e) => {
                setData({ ...data, confirm_password: e.target.value })
              }}
              error={
                data.new_password !== data.confirm_password &&
                data.confirm_password !== '' &&
                'Password do not match'
              }
              radius="md"
              mb={'md'}
            />

            <Button
              loading={loading}
              disabled={
                data.new_password !== '' &&
                passwordRegex.test(data.new_password) &&
                data.new_password === data.confirm_password
                  ? false
                  : true
              }
              onClick={() => {
                handleSubmit()
              }}
            >
              Submit
            </Button>
          </>
        </Stack>
      </div>
    )
  }
}

export default ResetPassword
