import type { Component } from "solid-js";
import Scaffold from "../material/Scaffold";
import {
  AppBar,
  Divider,
  IconButton,
  List,
  ListItemButton,
  ListItemSecondaryAction,
  ListItemText,
  ListSubheader,
  Switch,
  Toolbar,
} from "@suid/material";
import { Title } from "../material/typography";
import { ArrowBack } from "@suid/icons-material";
import { createTranslator } from "../platform/i18n";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores";
import { useNavigator } from "../platform/StackedRouter";

const Motions: Component = () => {
  const {pop} = useNavigator();
  const [t] = createTranslator(
    (code) =>
      import(`./i18n/${code}.json`) as Promise<{
        default: Record<string, string | undefined>;
      }>,
  );
  const settings = useStore($settings);
  return (
    <Scaffold
      topbar={
        <AppBar position="static">
          <Toolbar
            variant="dense"
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
          >
            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
              <ArrowBack />
            </IconButton>
            <Title>{t("motions")}</Title>
          </Toolbar>
        </AppBar>
      }
    >
      <List
        sx={{
          paddingBottom: "calc(var(--safe-area-inset-bottom, 0px) + 16px)",
        }}
      >
        <li>
          <ul style={{ "padding-left": 0 }}>
            <ListSubheader>{t("motions.gifs")}</ListSubheader>
            <ListItemButton
              onClick={() =>
                $settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs)
              }
            >
              <ListItemText>{t("motions.gifs.autoplay")}</ListItemText>
              <ListItemSecondaryAction>
                <Switch checked={settings().autoPlayGIFs}></Switch>
              </ListItemSecondaryAction>
            </ListItemButton>
            <Divider />
          </ul>
        </li>
        <li>
          <ul style={{ "padding-left": 0 }}>
            <ListSubheader>{t("motions.vids")}</ListSubheader>
            <ListItemButton
              onClick={() =>
                $settings.setKey("autoPlayVideos", !settings().autoPlayVideos)
              }
            >
              <ListItemText>{t("motions.vids.autoplay")}</ListItemText>
              <ListItemSecondaryAction>
                <Switch checked={settings().autoPlayVideos}></Switch>
              </ListItemSecondaryAction>
            </ListItemButton>
            <Divider />
          </ul>
        </li>
      </List>
    </Scaffold>
  );
};

export default Motions;