import Alert from '@/core/components/elements/Alert/Alert'
import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'
import Link from '@/core/components/elements/Link/Link'
import BasicLayout from '@/core/components/layouts/BasicLayout'
import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import IndoteknikLogo from '@/images/logo.png'
import axios from 'axios'
import Image from 'next/image'
import { useState } from 'react'

export default function ForgotPassword() {
  return (
    <>
      <MobileView>
        <FormComponent />
        <SimpleFooter />
      </MobileView>

      <DesktopView>
        <BasicLayout>
          <div className='container mx-auto'>
            <div className='w-1/2 mx-auto'>
              <FormComponent />
            </div>
          </div>
        </BasicLayout>
      </DesktopView>
    </>
  )
}

const FormComponent = () => {
  const [isLoading, setIsLoading] = useState(false)
  const [alert, setAlert] = useState(null)

  const [email, setEmail] = useState('')

  const forgotPasswordRequest = async (e) => {
    e.preventDefault()
    setIsLoading(true)
    let submitRequest = await axios.post(
      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/forgot-password`,
      {
        email
      }
    )
    setIsLoading(false)
    if (submitRequest.data.success) {
      setAlert({
        children: <>Mohon cek email anda untuk reset password akun Indoteknik</>,
        type: 'success'
      })
    } else {
      setAlert({
        children: (
          <>
            Email tersebut belum terdaftar,{' '}
            <Link className='text-gray_r-12 inline-block' href='/register'>
              daftar sekarang
            </Link>
            .
          </>
        ),
        type: 'info'
      })
    }
  }

  return (
    <div className='p-6 pt-10 md:px-0 flex flex-col items-center min-h-screen'>
      <Link href='/'>
        <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={150} height={50} />
      </Link>

      <h1 className='text-2xl mt-4 font-semibold text-center'>Lupa Kata Sandi Akun Indoteknik</h1>

      {alert && (
        <Alert className='text-center mt-4' type={alert.type}>
          {alert.children}
        </Alert>
      )}

      <form onSubmit={forgotPasswordRequest} className='mt-6 w-full'>
        <input
          type='email'
          id='email'
          className='form-input w-full text-center'
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder='Masukan alamat email'
          autoFocus
        />
        <button
          type='submit'
          disabled={!email || isLoading}
          className='btn-yellow font-semibold mt-4 w-full'
        >
          {isLoading ? 'Loading...' : 'Kirim Permintaan'}
        </button>
      </form>
    </div>
  )
}