import type { Timezone } from 'contexts/globalSettings'
import { useGlobalSettings } from 'contexts/globalSettings'
import { useRef, useState } from 'react'

import { setTimezone } from '../contexts/globalSettings'
import { Button } from './Button'

export interface SettingsModalProps {
  timezone?: Timezone
}
export const SettingsModal = (props: SettingsModalProps) => {
  const globalSettings = useGlobalSettings()
  const [isChecked, setIsChecked] = useState(false)

  const checkBoxRef = useRef<HTMLInputElement>(null)

  return (
    <div>
      <input className="modal-toggle" defaultChecked={false} id="my-modal-9" ref={checkBoxRef} type="checkbox" />
      <label className="cursor-pointer modal" htmlFor="my-modal-9">
        <label
          className={`absolute top-[42%] bottom-5 left-[260px] max-w-[450px] max-h-[250px]
          border-[1px] no-scrollbar modal-box`}
          htmlFor="temp"
        >
          <div className="flex flex-col justify-between h-full">
            <div className="flex flex-col">
              <h1 className="text-2xl font-bold underline underline-offset-2">Settings</h1>
              <div className="flex justify-start w-full">
                <div className="flex-row mt-2 w-full form-control">
                  <h1 className="mt-[5px] text-lg font-bold">Time & Date: </h1>
                  <label className="justify-start ml-6 cursor-pointer label">
                    <span className="mr-2 font-bold">Local</span>
                    <input
                      checked={globalSettings.timezone === 'Local'}
                      className={`${globalSettings.timezone === 'Local' ? `bg-stargaze` : `bg-gray-600`} checkbox`}
                      onClick={() => {
                        setTimezone('Local' as Timezone)
                        window.localStorage.setItem('timezone', 'Local')
                      }}
                      type="checkbox"
                    />
                  </label>
                  <label className="justify-start ml-4 cursor-pointer label">
                    <span className="mr-2 font-bold">UTC</span>
                    <input
                      checked={globalSettings.timezone === 'UTC'}
                      className={`${globalSettings.timezone === 'UTC' ? `bg-stargaze` : `bg-gray-600`} checkbox`}
                      onClick={() => {
                        setTimezone('UTC' as Timezone)
                        window.localStorage.setItem('timezone', 'UTC')
                      }}
                      type="checkbox"
                    />
                  </label>
                </div>
              </div>
            </div>
            <Button
              className="w-[40%] max-h-12 bg-blue-500 hover:bg-blue-600"
              isWide
              onClick={() => {
                setTimezone('UTC' as Timezone)
                window.localStorage.setItem('timezone', 'UTC')
              }}
            >
              Use Defaults
            </Button>
          </div>
        </label>
      </label>
    </div>
  )
}