import { Box, Switch } from "@mui/material";
import { useAtom } from "jotai";
import { FC } from "react";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
import { CategoryTitle } from "../CategoryTitle";
import { SettingsItem } from "../SettingsItem";

interface SettingsTabWindowProps {
  sx?: any;
}

export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
  // atoms
  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);

  const handleSettingsWindowValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
    const newSettings = {
      ...stagedSettings,
      window: {
        ...stagedSettings.window,
        [settingKey]: settingValue,
      },
    };
    setStagedSettings(newSettings);
  };

  return (
    <Box sx={{ sx }}>
      <CategoryTitle title="Fullscreen" />
      <SettingsItem
        defaultText="On"
        description="Fullscreen on startup"
        input={
          <Switch
            checked={stagedSettings.window.start_fullscreen}
            name="start_fullscreen"
            onChange={(e) => {
              handleSettingsWindowValueChange(e.target.name, e.target.checked);
            }}
          />
        }
      />
      <CategoryTitle title="Titlebar Buttons" />
      <SettingsItem
        defaultText="Off"
        description="Minimize button"
        input={
          <Switch
            checked={stagedSettings.window.minimize_button}
            name="minimize_button"
            onChange={(e) => {
              handleSettingsWindowValueChange(e.target.name, e.target.checked);
            }}
          />
        }
      />
      <SettingsItem
        defaultText="Off"
        description="Maximize button"
        input={
          <Switch
            checked={stagedSettings.window.maximize_button}
            name="maximize_button"
            onChange={(e) => {
              handleSettingsWindowValueChange(e.target.name, e.target.checked);
            }}
          />
        }
      />
    </Box>
  );
};
