import Setting from "./Setting"
import { faRotateLeft } from "@fortawesome/pro-regular-svg-icons"
import { faXmark } from "@fortawesome/pro-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useState } from "react"

const settingOptionsInit: { [key: string]: boolean } = {
  allowSpectators: false,
  allowSpecials: false,
  allowChat: false,
  allowMarkDraw: false,
}

function Settings({ closeSettings }: { closeSettings: () => void }) {
  const [settingOptions, setSettingOptions] = useState(settingOptionsInit)
  return (
    <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/40">
      <div className="w-full max-w-screen-lg">
        <div className="mx-16 flex flex-col rounded-3xl border-4 border-slate-800 bg-zinc-500 p-8">
          <div className="flex items-center justify-center">
            <h1 className="font-farro ml-auto pl-14 text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
              Settings
            </h1>
            <button
              className="top-6 right-6 ml-auto h-14  w-14"
              onClick={closeSettings}
            >
              <FontAwesomeIcon
                className="h-full w-full text-gray-800 drop-shadow-md"
                icon={faXmark}
              />
            </button>
          </div>
          <div className="mt-8 rounded-xl bg-zinc-600 p-8">
            <div className="flex items-center justify-end">
              <button
                className="top-8 right-12  h-14 w-14"
                onClick={() => setSettingOptions(settingOptionsInit)}
              >
                <FontAwesomeIcon
                  className="h-full w-full text-gray-800 drop-shadow-md"
                  icon={faRotateLeft}
                />
              </button>
            </div>
            <div className="flex flex-col gap-8">
              {Object.keys(settingOptions).map((key) => {
                const state = settingOptions[key]
                const onClick = () =>
                  setSettingOptions((e) => ({ ...e, [key]: !e[key] }))
                return <Setting key={key} props={{ key, state, onClick }} />
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Settings
