'use client'

import { useEffect, useState } from 'react'
import { Setting } from '../componets/Setting'
import { writeNormalConfig } from '../util/BazookaManager'
import { useGlobal } from '../GlobalProvider'

export default function Settings () {
  const [allowNotifications, setAllowNotifications] = useState(false)
  const [alwaysShowGamesInSidebar, setAlwaysShowGamesInSidebar] =
    useState(false)
  const [theme, setTheme] = useState(0)

  const [loaded, setLoaded] = useState(false)
  const { normalConfig, setNormalConfig } = useGlobal()

  useEffect(() => {
    ;(async () => {
      while (normalConfig != null) {
        setAllowNotifications(normalConfig.settings.allowNotifications)
        setAlwaysShowGamesInSidebar(
          normalConfig.settings.alwaysShowGamesInSidebar
        )
        setTheme(normalConfig.settings.theme)
        setLoaded(true)
        break
      }
    })()
  }, [normalConfig])

  return (
    <>
      <p className='text-3xl ml-4 mt-4'>Settings</p>
      {loaded && (
        <div className='ml-4 mt-4 bg-(--col1) border border-(--col3) rounded-lg p-4 w-fit h-fit'>
          <Setting
            label='Allow sending notifications'
            value={allowNotifications}
            onChange={async () => {
              while (normalConfig != null) {
                setAllowNotifications(!allowNotifications)
                setNormalConfig({
                  ...normalConfig,
                  settings: {
                    ...normalConfig.settings,
                    allowNotifications: !allowNotifications
                  }
                })
                writeNormalConfig({
                  ...normalConfig,
                  settings: {
                    ...normalConfig.settings,
                    allowNotifications: !allowNotifications
                  }
                })
                break
              }
            }}
          />
          <Setting
            label='Always show games in sidebar'
            value={alwaysShowGamesInSidebar}
            onChange={async () => {
              while (normalConfig != null) {
                setAlwaysShowGamesInSidebar(!alwaysShowGamesInSidebar)
                setNormalConfig({
                  ...normalConfig,
                  settings: {
                    ...normalConfig.settings,
                    alwaysShowGamesInSidebar: !alwaysShowGamesInSidebar
                  }
                })
                writeNormalConfig({
                  ...normalConfig,
                  settings: {
                    ...normalConfig.settings,
                    alwaysShowGamesInSidebar: !alwaysShowGamesInSidebar
                  }
                })
                break
              }
            }}
          />
          <div>
            <label className='text-lg'>Theme:</label>
            <select
              className='ml-2 bg-(--col2) border border-(--col4) rounded-md'
              value={theme}
              onChange={async e => {
                const newTheme = parseInt(e.target.value)
                while (normalConfig != null) {
                  setTheme(newTheme)
                  setNormalConfig({
                    ...normalConfig,
                    settings: {
                      ...normalConfig.settings,
                      theme: newTheme
                    }
                  })
                  writeNormalConfig({
                    ...normalConfig,
                    settings: {
                      ...normalConfig.settings,
                      theme: newTheme
                    }
                  })
                  break
                }
              }}
            >
              <option value={0}>Dark (default)</option>
              <option value={1}>Red</option>
              <option value={2}>Green</option>
              <option value={3}>Blue</option>
              <option value={4}>Purple</option>
            </select>
          </div>
        </div>
      )}
    </>
  )
}