import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
import { useAtom } from "jotai";
import { FC } from "react";
import { settingsAtom } from "../../../lib/store/jotai/settings";
import { SettingsCategoryTitle } from "./SettingsCategoryTitle";
import { SettingsItem } from "./SettingsItem";

interface SettingsTabDisplayProps {
  sx?: any;
}

export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
  // atoms
  const [stagedSettings, setStagedSettings] = useAtom(settingsAtom);

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

  return (
    <Box sx={{ sx }}>
      <SettingsCategoryTitle title="Basic settings" />
      <SettingsItem
        settingsDescription={
          <>
            <Typography>Dark mode</Typography>
          </>
        }
        settingsInput={
          <Switch
            checked={stagedSettings.display.dark_mode}
            name="dark_mode"
            onChange={(e) => {
              handleSettingsDisplayValueChange(e.target.name, e.target.checked);
            }}
          />
        }
      />
      <SettingsItem
        settingsDescription={
          <>
            <Typography>Accent color</Typography>
            <Typography
              color="lightgrey"
              variant="caption"
            >
              Default: #8ab4f8
            </Typography>
          </>
        }
        settingsInput={
          <TextField
            name="accent_color"
            onChange={(e) => {
              handleSettingsDisplayValueChange(e.target.name, e.target.value);
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="color"
            value={stagedSettings.display.accent_color}
            variant="standard"
          />
        }
      />
      <SettingsItem
        settingsDescription={
          <>
            <Typography>Font family</Typography>
            <Typography
              color="lightgrey"
              variant="caption"
            >
              Default: Monospace
            </Typography>
          </>
        }
        settingsInputLong={
          <TextField
            fullWidth
            name="font_family"
            onChange={(e) => {
              handleSettingsDisplayValueChange(e.target.name, e.target.value);
            }}
            select
            size="small"
            sx={{
              maxWidth: "100%",
            }}
            value={stagedSettings.display.font_family || "monospace"}
            variant="outlined"
          >
            <MenuItem value="monospace">Monospace</MenuItem>
            <MenuItem value="sans_serif">Sans Serif</MenuItem>
            <MenuItem value="comic_sans">Comic Sans</MenuItem>
            <MenuItem value="system_font">System font</MenuItem>
          </TextField>
        }
      />
      <SettingsItem
        settingsDescription={
          <>
            <Typography>Font scaling</Typography>
            <Typography
              color="lightgrey"
              variant="caption"
            >
              Default: 100%
            </Typography>
          </>
        }
        settingsInputBottom={
          <Slider
            marks={[
              {
                value: 80,
                label: "80%",
              },
              {
                value: 90,
                label: "90%",
              },
              {
                value: 100,
                label: "100%",
              },
              {
                value: 110,
                label: "110%",
              },
              {
                value: 120,
                label: "120%",
              },
            ]}
            min={80}
            max={120}
            name="font_scaling"
            onChangeCommitted={(e, value) => {
              handleSettingsDisplayValueChange("font_scaling", value);
            }}
            step={10}
            value={stagedSettings.display.font_scaling}
            valueLabelDisplay="auto"
          />
        }
      />
      <SettingsCategoryTitle title="Advanced settings" />
      <SettingsItem
        settingsDescription={
          <>
            <Typography component="div">
              <Chip
                color="warning"
                label="Dev"
                size="small"
                sx={{
                  mr: 1,
                }}
                variant="outlined"
              />
              Transition duration
            </Typography>
            <Typography
              color="lightgrey"
              variant="caption"
            >
              Default: 200ms
            </Typography>
          </>
        }
        settingsInput={
          <TextField
            InputProps={{
              endAdornment: <InputAdornment position="end">ms</InputAdornment>,
              inputProps: { min: 0, max: 100, step: 1 },
            }}
            name="transition_duration"
            onChange={(e) => {
              handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="number"
            value={stagedSettings.display.transition_duration}
            variant="standard"
          />
        }
      />
      <SettingsItem
        settingsDescription={
          <>
            <Typography component="div">
              <Chip
                color="warning"
                label="Dev"
                size="small"
                sx={{
                  mr: 1,
                }}
                variant="outlined"
              />
              Radius
            </Typography>
            <Typography
              color="lightgrey"
              variant="caption"
            >
              Default: 8px
            </Typography>
          </>
        }
        settingsInput={
          <TextField
            InputProps={{
              endAdornment: <InputAdornment position="end">px</InputAdornment>,
              inputProps: { min: 0, max: 100, step: 1 },
            }}
            name="radius"
            onChange={(e) => {
              handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="number"
            value={stagedSettings.display.radius}
            variant="standard"
          />
        }
      />
      <SettingsItem
        settingsDescription={
          <>
            <Typography component="div">
              <Chip
                color="warning"
                label="Dev"
                size="small"
                sx={{
                  mr: 1,
                }}
                variant="outlined"
              />
              Window height
            </Typography>
            <Typography
              color="lightgrey"
              variant="caption"
            >
              Default: 60%
            </Typography>
          </>
        }
        settingsInput={
          <TextField
            InputProps={{
              endAdornment: <InputAdornment position="end">%</InputAdornment>,
              inputProps: { min: 0, max: 100, step: 1 },
            }}
            name="window_height"
            onChange={(e) => {
              handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="number"
            value={stagedSettings.display.window_height}
            variant="standard"
          />
        }
      />
      <SettingsItem
        settingsDescription={
          <>
            <Typography component="div">
              <Chip
                color="warning"
                label="Dev"
                size="small"
                sx={{
                  mr: 1,
                }}
                variant="outlined"
              />
              Window width
            </Typography>
            <Typography
              color="lightgrey"
              variant="caption"
            >
              Default: 400px
            </Typography>
          </>
        }
        settingsInput={
          <TextField
            InputProps={{
              endAdornment: <InputAdornment position="end">px</InputAdornment>,
              inputProps: { min: 0, max: 10000, step: 1 },
            }}
            name="window_width"
            onChange={(e) => {
              handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="number"
            value={stagedSettings.display.window_width}
            variant="standard"
          />
        }
      />
    </Box>
  );
};
