import styles from '../styles/Settings.module.scss'
import React, {useContext} from 'react'
import fetchJson from 'lib/fetchJson'
import useUser from 'lib/useUser'
import usePopup from 'hooks/usePopup'
import Context from 'context';
import {close} from 'helpers/windowActions'

const Settings = () => {
  const {setPopup} = usePopup()
  const {settings: {theme, language}, setSettings, setApps} = useContext(Context)
  const {user} = useUser()

  const handleSave = e => {
    e.preventDefault;

    try {
      fetchJson('/api/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({_id: user._id, theme, language}),
      })
      setPopup({
        content: 'Settings saved',
        time: 2000,
      })
      close('Settings', setApps)
    } catch (err) {
      setpopup({
        content: 'could not save settings',
        time: 2000,
        error: true,
      })
    }
  }

  return (
    <div className={styles.settings}>
      <div>Language:</div>
      <div>
        <span className={styles.settings__active}>English</span>
      </div>
      <div>Theme: </div>
      <div>
        <span
          onClick={()=>{setSettings({language, theme:'green'})}}
          className={theme === 'green' ? styles.settings__active : ''}
        />
        <span
          onClick={()=>{setSettings({language, theme:'blue'})}}
          className={theme === 'blue' ? styles.settings__active : ''}
        />
        <span
          onClick={()=>{setSettings({language, theme:'black'})}}
          className={theme === 'black' ? styles.settings__active : ''}
        />
      </div>
      <input
        type="button"
        className="window__button"
        value="Save"
        onClick={handleSave}
      />
    </div>
  )
}

export default Settings