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 />
          <fieldset>
            <legend>{t('language')}</legend>
            {['en', 'pl', 'es', 'de'].map(l => (
              <>
                <input
                  key={`i_${l}`}
                  id={`language_${l}`}
                  type="radio"
                  name="language"
                  value={l}
                  defaultChecked={settings.language === l}
                  onChange={() => languageChange(l)}
                />
                <label key={`l_${l}`} htmlFor={`language_${l}`}>{l.toUpperCase()}</label>
              </>
            ))}
          </fieldset>
          <fieldset>
            <legend>{t('color_theme')}</legend>
            {['green', 'blue', 'black'].map(c => (
              <>
                <input
                  key={`i_${c}`}
                  id={`theme_${c}`}
                  type="radio"
                  name="theme"
                  value={c}
                  defaultChecked={settings.theme === c}
                  onChange={() => themeChange(c)}
                />
                <label key={`l_${c}`} htmlFor={`theme_${c}`} />
              </>
            ))}
          </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,
}