import styles from 'styles/Main.module.scss'
import React from 'react'
import PropTypes from 'prop-types'
import useSettings from 'hooks/useSettings'

const Form = ({ errorMessage, onSubmit, isLogin }) => {
  const { settings, setSettings, t } = useSettings()

  const themeChange = c => {
    setSettings(prev => ({ ...prev, theme: c }))
  }

  const languageChange = l => {
    setSettings(prev => ({ ...prev, language: l }))
  }

  return (
    <form className={`window window--popup ${styles.userForm}`} onSubmit={onSubmit}>
      <div className='window__content--popup'>
        {isLogin ? t('log_in') : t('register_user')}
      </div>
      <input type='email' name='email' placeholder='email' required />
      <input type='password' name='password' minLength='6' placeholder={t('password')} required />
      {!isLogin && (
        <>
          <input type='password' name='password_confirm' placeholder={t('confirm_password')} required />
          <legend>{t('language')}</legend>
          <fieldset>
            {['en', 'pl', 'es', 'de'].map(l => (
              <fieldset key={l}>
                <input
                  id={`language_${l}`}
                  type='radio'
                  name='language'
                  value={l}
                  defaultChecked={settings.language === l}
                  onChange={() => languageChange(l)}
                />
                <label htmlFor={`language_${l}`}>{l.toUpperCase()}</label>
              </fieldset>
            ))}
          </fieldset>
          <legend>{t('color_theme')}</legend>
          <fieldset>
            {['green', 'blue', 'black'].map(c => (
              <fieldset key={c}>
                <input
                  id={`theme_${c}`}
                  type='radio'
                  name='theme'
                  value={c}
                  defaultChecked={settings.theme === c}
                  onChange={() => themeChange(c)}
                />
                <label htmlFor={`theme_${c}`} />
              </fieldset>
            ))}
          </fieldset>
        </>
      )}

      <input className='window__button' type='submit' value={isLogin ? t('login') : t('register')} />

      {errorMessage && <p className='error'>{t(errorMessage)}</p>}
    </form>
  )
}

export default Form

Form.propTypes = {
  errorMessage: PropTypes.string,
  onSubmit: PropTypes.func
}