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

const ChooseRegion: Component = () => {
  const {pop} = useNavigator();
  const [t] = createTranslator(
    () => import("./i18n/lang-names.json"),
    (code) =>
      import(`./i18n/${code}.json`) as Promise<{
        default: Record<string, string | undefined> & {
          ["lang.auto"]: Template<{ detected: string }>;
        };
      }>,
  );

  const settings = useStore($settings);

  const region = () => settings().region;

  const matchedRegionCode = createMemo(() => autoMatchRegion());

  const onCodeChange = (code?: string) => {
    $settings.setKey("region", code);
  };

  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("Choose Region")}</Title>
          </Toolbar>
        </AppBar>
      }
    >
      <List
        sx={{
          paddingBottom: "var(--safe-area-inset-bottom, 0)",
        }}
      >
        <ListItemButton
          onClick={() => {
            onCodeChange(region() ? undefined : matchedRegionCode());
          }}
        >
          <ListItemText>
            {t("region.auto", {
              detected:
                t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
            })}
          </ListItemText>
          <ListItemSecondaryAction>
            <Switch checked={typeof region() === "undefined"} />
          </ListItemSecondaryAction>
        </ListItemButton>

        <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
          <For each={SUPPORTED_REGIONS}>
            {(code) => (
              <ListItemButton
                disabled={typeof region() === "undefined"}
                onClick={[onCodeChange, code]}
              >
                <ListItemText>{t(`region.${code}`)}</ListItemText>
                <ListItemSecondaryAction>
                  <Radio
                    checked={
                      region() === code ||
                      (region() === undefined && matchedRegionCode() == code)
                    }
                  />
                </ListItemSecondaryAction>
              </ListItemButton>
            )}
          </For>
        </List>
      </List>
    </Scaffold>
  );
};

export default ChooseRegion;