import { createResource, For, type ParentComponent } from "solid-js";
import Scaffold from "../material/Scaffold.js";
import {
  AppBar,
  Divider,
  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemSecondaryAction,
  ListItemText,
  ListSubheader,
  NativeSelect,
  Select,
  Switch,
  Toolbar,
} from "@suid/material";
import { Close as CloseIcon } from "@suid/icons-material";
import { useNavigate } from "@solidjs/router";
import { Title } from "../material/typography.jsx";
import { useSessions } from "../masto/clients.js";
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";

const Settings: ParentComponent = () => {
  const navigate = useNavigate();
  const settings$ = useStore($settings);

  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(env(safe-area-inset-bottom, 0px) + 16px);
    }
  `;
  return (
    <Scaffold
      topbar={
        <AppBar position="static">
          <Toolbar variant="dense">
            <IconButton onClick={[navigate, -1]}>
              <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 />
              </ListItemSecondaryAction>
            </ListItem>
            <ListItem>
              <ListItemText>Sign in...</ListItemText>
            </ListItem>
          </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 />
                  </ListItemSecondaryAction>
                </ListItem>
                <ListItemButton onClick={[doSignOut, acct]}>
                  <ListItemText>Sign out</ListItemText>
                </ListItemButton>
              </ul>
            )}
          </For>
        </li>
        <li>
          <ListSubheader>Reading</ListSubheader>
          <ListItem>
            <ListItemText secondary="Regular">Fonts</ListItemText>
          </ListItem>
          <ListItem>
            <ListItemText secondary="Tutu will download toots before you scroll to the position.">
              Prefetch Toots
            </ListItemText>
            <ListItemSecondaryAction>
              <Switch
                checked={!settings$().prefetchTootsDisabled}
                onChange={(e) =>
                  $settings.setKey("prefetchTootsDisabled", !e.target.checked)
                }
              />
            </ListItemSecondaryAction>
          </ListItem>
        </li>
        <li>
          <ListSubheader>Controls</ListSubheader>
          <ListItem>
            <ListItemText>Optimized UI</ListItemText>
            <ListItemSecondaryAction>
              <NativeSelect value="auto">
                <option value="auto">Tutu Decides (Mouse)</option>
                <option value="mouse">Mouse</option>
                <option value="touch">Touch</option>
                <option value="controlpad">Control Pad</option>
              </NativeSelect>
            </ListItemSecondaryAction>
          </ListItem>
        </li>
        <li>
          <ListSubheader>This Application</ListSubheader>
          <ListItem>
            <ListItemText secondary="Comformtable tooting experience.">
              About Tutu
            </ListItemText>
          </ListItem>
          <ListItem>
            <ListItemText
              secondary={`Using v${import.meta.env.PACKAGE_VERSION} (built on ${intlFormat(import.meta.env.BUILT_AT)}, ${import.meta.env.MODE})`}
            >
              No updates
            </ListItemText>
          </ListItem>
        </li>
      </List>
    </Scaffold>
  );
};

export default Settings;