import styles from '../styles/Settings.module.scss'
import React from 'react'
import {close} from 'helpers/windowActions'
import useUser from 'hooks/useUser'
import usePopup from 'hooks/usePopup'
import useSettings from 'hooks/useSettings'
import useApps from 'hooks/useApps'
import {saveSettings} from '../api'

const Settings = () => {
  const {setPopup} = usePopup()
  const {setApps} = useApps()
  const {settings: {theme, language}, setSettings, t} = useSettings()
  const {user} = useUser()

  const handleSave = e => {
    e.preventDefault;

    saveSettings({_id: user._id, theme, language})
    .then(() => {
      setPopup({
        content: t('settings_saved'),
        time: 2000,
      })
      close('Settings', setApps)
    })
    .catch(() => {
      setpopup({
        content: t('settings_save_error'),
        time: 2000,
        error: true,
      })
    })
  }

  return (
    <div className={styles.settings}>
      <div>{t('language')}</div>
      <div>
        {['en', 'pl', 'es', 'de'].map(l => (
          <span
            key={l}
            className={language === l ? styles.settings__langactive : ''}
            onClick={()=>{setSettings(prev => ({...prev, language: l}))}}
          >{l.toUpperCase()}</span>
        ))}
      </div>
      <div>{t('color_theme')}</div>
      <div>
        {['green', 'blue', 'black'].map(c => (
          <span
            key={c}
            onClick={()=>{setSettings(prev => ({...prev, theme: c}))}}
            className={theme === c ? styles.settings__active : ''}
          />
        ))}
      </div>
      <input
        type="button"
        className="window__button"
        value={t('save')}
        onClick={handleSave}
      />
    </div>
  )
}

export default Settings