import { For, Show, type ParentComponent } from "solid-js";
import Scaffold from "../material/Scaffold.js";
import {
  AppBar,
  Divider,
  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemSecondaryAction,
  ListItemText,
  ListSubheader,
  Switch,
  Toolbar,
} from "@suid/material";
import {
  Close as CloseIcon,
  Refresh as RefreshIcon,
} from "@suid/icons-material";
import { useNavigate } from "@solidjs/router";
import { Title } from "../material/typography.jsx";
import { css } from "solid-styled";
import { useSignedInProfiles } from "../masto/acct.js";
import { signOut, type Account } from "../accounts/stores.js";
import { intlFormat } from "date-fns";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores.js";
import { useRegisterSW } from "virtual:pwa-register/solid";

const Settings: ParentComponent = () => {
  const navigate = useNavigate();
  const settings$ = useStore($settings);
  const {
    needRefresh: [needRefresh],
  } = useRegisterSW();

  const [profiles] = useSignedInProfiles();

  const doSignOut = (acct: Account) => {
    signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
  };

  css`
    ul {
      padding: 0;
    }

    .setting-list {
      padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 16px);
    }
  `;
  return (
    <Scaffold
      topbar={
        <AppBar position="static">
          <Toolbar
            variant="dense"
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
          >
            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
              <CloseIcon />
            </IconButton>
            <Title>Settings</Title>
          </Toolbar>
        </AppBar>
      }
    >
      <List class="setting-list" use:solid-styled>
        <li>
          <ul>
            <ListSubheader>Accounts</ListSubheader>
            <ListItem>
              <ListItemText>All Notifications</ListItemText>
              <ListItemSecondaryAction>
                <Switch value={false} />
              </ListItemSecondaryAction>
            </ListItem>
            <Divider />
            <ListItem>
              <ListItemText>Sign in...</ListItemText>
            </ListItem>
            <Divider />
          </ul>
          <For each={profiles()}>
            {({ account: acct, inf }) => (
              <ul data-site={acct.site} data-username={inf?.username}>
                <ListSubheader>{`@${inf?.username ?? "..."}@${new URL(acct.site).host}`}</ListSubheader>
                <ListItem>
                  <ListItemText>Notifications</ListItemText>
                  <ListItemSecondaryAction>
                    <Switch value={false} />
                  </ListItemSecondaryAction>
                </ListItem>
                <Divider />
                <ListItemButton onClick={[doSignOut, acct]}>
                  <ListItemText>Sign out</ListItemText>
                </ListItemButton>
                <Divider />
              </ul>
            )}
          </For>
        </li>
        <li>
          <ListSubheader>Reading</ListSubheader>
          <ListItem>
            <ListItemText secondary="Regular">Fonts</ListItemText>
          </ListItem>
          <Divider />
          <ListItem
            onClick={(e) =>
              $settings.setKey(
                "prefetchTootsDisabled",
                !settings$().prefetchTootsDisabled,
              )
            }
          >
            <ListItemText secondary="Tutu will download toots before you scroll to the position.">
              Prefetch Toots
            </ListItemText>
            <ListItemSecondaryAction>
              <Switch checked={!settings$().prefetchTootsDisabled} />
            </ListItemSecondaryAction>
          </ListItem>
          <Divider />
        </li>
        <li>
          <ListSubheader>This Application</ListSubheader>
          <ListItem>
            <ListItemText secondary="Comformtable tooting experience.">
              About Tutu
            </ListItemText>
          </ListItem>
          <Divider />
          <ListItem>
            <ListItemText
              secondary={`Using v${import.meta.env.PACKAGE_VERSION} (built on ${intlFormat(import.meta.env.BUILT_AT)}, ${import.meta.env.MODE})`}
            >
              {needRefresh()
                ? "An update is ready, restart the Tutu to apply"
                : "No updates"}
            </ListItemText>
            <Show when={needRefresh()}>
              <ListItemSecondaryAction>
                <IconButton aria-label="Restart Now" onClick={() => window.location.reload()}>
                  <RefreshIcon />
                </IconButton>
              </ListItemSecondaryAction>
            </Show>
          </ListItem>
          <Divider />
        </li>
      </List>
    </Scaffold>
  );
};

export default Settings;