import styles from '../styles/ChangePassword.module.scss'
import { useState } from 'react'
import useSettings from 'hooks/useSettings'
import usePopup from 'hooks/usePopup'
import useApps from 'hooks/useApps'
import useUser from 'hooks/useUser'
import { close } from 'helpers/windowActions'
import { changePassword } from '../api'

const App = () => {
  const { t } = useSettings()
  const { user } = useUser()
  const { setApps } = useApps()
  const { setPopup } = usePopup()
  const [currPassError, setCurrPassError] = useState(false)
  const [newPassError, setNewPassError] = useState(false)

  const onSubmit = async (e) => {
    e.preventDefault()

    const {
      current_password: {value: currentPassword},
      new_password: { value: newPassword},
      confirm_password: {value: confirmPassword}
    } = e.currentTarget

    if (newPassword !== confirmPassword) {
      setPopup({
        content: t('change_password_wrong_new'),
        time: 2000,
        error: true
      })
      setNewPassError(true)

    } else if (newPassword === currentPassword) {
      setPopup({
        content: t('change_password_same_password'),
        time: 2000,
        error: true
      })
      setNewPassError(true)
    } else {
      try {
        await changePassword({_id: user._id, currentPassword, newPassword})
        setPopup({
          content: t('change_password_changed'),
          time: 2000,
        })
        close('ChangePassword', setApps)
      } catch(e) {
        if (e?.data?.error === 'Wrong password') {
          setPopup({
            content: t('change_password_wrong_current'),
            time: 2000,
            error: true
          })
          setCurrPassError(true)
        } else {
          setPopup({
            content: t('change_password_error'),
            time: 2000,
            error: true
          })
        }
      }
    }
  }

  return (
    <form className={styles.password} onSubmit={onSubmit}>
      <label className={styles.label} htmlFor='current_password'>
        {t('change_password_current')}
      </label>
      <input
        className={`${styles.input} ${currPassError ? styles.error : ''}`}
        id='current_password'
        type='password'
        name='current_password'
        title={t('change_password_current')}
        onChange={() => { currPassError && setCurrPassError(false) }}
        required
      />
      <label className={styles.label} htmlFor='new_password'>
        {t('change_password_new')}
      </label>
      <input
        className={`${styles.input} ${newPassError ? styles.error : ''}`}
        id='new_password'
        type='password'
        name='new_password'
        title={t('change_password_new')}
        onChange={() => { newPassError && setNewPassError(false) }}
        required
      />
      <input
        className={`${styles.input} ${newPassError ? styles.error : ''}`}
        type='password'
        name='confirm_password'
        placeholder={t('change_password_confirm')}
        title={t('change_password_confirm')}
        onChange={() => { newPassError && setNewPassError(false) }}
        required
      />
      <input
        className='window__button'
        type='submit'
        value={t('save')}
      />
    </form>
  )
}

export default App