import styles from 'styles/Main.module.scss'
import React, {useState, useEffect} from 'react'
import useUser from 'lib/useUser'
import {Layout, App, Splash} from 'components'
import {open} from 'helpers/windowActions'
import appList from 'helpers/appList'
import Context from '../context';

const Home = () => {
  const [settings, setSettings] = useState()
  const [apps, setApps] = useState([])
  const {user} = useUser({
    redirectToLogin: true,
    redirectToVerify: true,
    redirectToApps: true,
  })

  useEffect(() => {
    if (user) {
      setSettings({theme: user.theme, language: user.language})
    }
  }, [user])

  if (!user) return (
    <Layout><Splash fixed /></Layout>
  )

  const handleClick = (e, appProps) => {
    switch (e.detail) {
      case 1:
        e.currentTarget.focus()
        break;
      case 2:
        open(appProps, setApps)
        e.currentTarget.blur()
        break;
    }
  };

  const handleKey = (e, appProps) => {
    if (e.key === 'Enter') {
      open(appProps, setApps)
    }
  }

  return (
      <Context.Provider value={{settings, setSettings, setApps}}>
        <Layout apps={apps} setApps={setApps} settings={settings}>
          <>
            {
              Object.entries(appList).filter(a => a[1].icon).map(a => (
                <div
                  key={`${a[0]}_icon`}
                  className={styles.icon}
                  onClick={e => handleClick(e, {appName: a[0], ...a[1]})}
                  onKeyDown={e => handleKey(e, {appName: a[0], ...a[1]})}
                  tabIndex="0"
                >
                  <img src={`./${a[0].toLowerCase()}.svg`} alt={`${a[0]} Icon`} />
                  <p>{a[0]}</p>
                </div>
              ))
            }
            {apps && apps.map(app => {
              const AppComponent = appList[app.name].component

              return (
                <App
                  key={`${app.name}_app`}
                  app={app}
                  setApps={setApps}
                >
                  <AppComponent />
                </App>
              );
            })}
          </>
        </Layout>
      </Context.Provider>
  )
}

export default Home