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 Image from 'next/image'
import { useRouter } from 'next/router'
import { useRef, useState } from 'react'
import IndoteknikLogo from '@/images/logo.png'
import odooApi from '@/core/api/odooApi'
import { setAuth } from '@/core/utils/auth'

export default function ResetPassword() {
  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 router = useRouter()
  const { token = '' } = router.query

  const password = useRef(null)
  const retypePassword = useRef(null)

  const [isLoading, setIsLoading] = useState(false)
  const [isValidPassword, setIsValidPassword] = useState(false)
  const [alert, setAlert] = useState(null)

  const checkValidPassword = () => {
    const passwordVal = password.current.value
    const retypePasswordVal = retypePassword.current.value
    if (passwordVal && passwordVal == retypePasswordVal) {
      setIsValidPassword(true)
    } else {
      setIsValidPassword(false)
    }
  }

  const resetPasswordRequest = async (e) => {
    e.preventDefault()
    setIsLoading(true)
    const result = await odooApi('POST', '/api/v1/user/reset-password', {
      token,
      password: password.current.value
    })
    setIsLoading(false)
    password.current.value = ''
    retypePassword.current.value = ''
    if (result.success) {
      setAuth(result.user)
      setAlert({
        children: (
          <>
            Berhasil melakukan reset password,{' '}
            <Link className='text-gray_r-12 inline-block' href='/'>
              kembali ke halaman utama
            </Link>
          </>
        ),
        type: 'success'
      })
    } else {
      setAlert({
        children: (
          <>
            Gagal melakukan reset password, token tidak ditemukan. Buat permintaan reset password{' '}
            <Link className='text-gray_r-12 inline-block' href='/forgot-password'>
              disini
            </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'>Reset Kata Sandi Akun Indoteknik</h1>

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

      <form onSubmit={resetPasswordRequest} className='mt-6 w-full'>
        <input
          type='password'
          id='password'
          className='form-input w-full text-center'
          ref={password}
          onChange={checkValidPassword}
          placeholder='Masukan kata sandi baru'
          autoFocus
        />

        <input
          type='password'
          id='retypePassword'
          className='form-input w-full text-center mt-4'
          ref={retypePassword}
          onChange={checkValidPassword}
          placeholder='Masukan kembali kata sandi baru'
        />

        <button
          type='submit'
          disabled={!isValidPassword || isLoading}
          className='btn-yellow font-semibold mt-4 w-full'
        >
          {isLoading ? 'Loading...' : 'Reset Password'}
        </button>
      </form>
    </div>
  )
}