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,
}