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 { Close as CloseIcon } from "@suid/icons-material";
import iso639_1 from "iso-639-1";
import {
  autoMatchRegion,
  createTranslator,
  SUPPORTED_REGIONS,
} from "../platform/i18n";
import { Title } from "../material/typography";
import type { Template } from "@solid-primitives/i18n";

type ChooseRegionProps = {
  code?: string;
  onCodeChange: (ncode?: string) => void;
  onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
};

const ChooseRegion: Component<ChooseRegionProps> = (props) => {
  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 unsupportedLangCodes = createMemo(() => {
    return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
  });

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

  return (
    <Scaffold
      topbar={
        <AppBar position="static">
          <Toolbar
            variant="dense"
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
          >
            <IconButton color="inherit" onClick={props.onClose} disableRipple>
              <CloseIcon />
            </IconButton>
            <Title>{t("Choose Language")}</Title>
          </Toolbar>
        </AppBar>
      }
    >
      <List
        sx={{
          paddingBottom: "var(--safe-area-inset-bottom, 0)",
        }}
      >
        <ListItemButton
          onClick={() => {
            props.onCodeChange(props.code ? undefined : matchedRegionCode());
          }}
        >
          <ListItemText>
            {t("region.auto", {
              detected: t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
            })}
          </ListItemText>
          <ListItemSecondaryAction>
            <Switch checked={typeof props.code === "undefined"} />
          </ListItemSecondaryAction>
        </ListItemButton>

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

export default ChooseRegion;