import Head from "next/head";
import Container from "@mui/material/Container";
import { Stack } from "@mui/material";
import { DividerBox } from "@/components/base/boxes";
import { useCallback, useEffect, useState } from "react";
import { HF_FileEntry, HFRes } from "@/types";
import { basename } from "path";

export default function Home() {
  const [repo, setRepo] = useState('https://huggingface.co/datasets/banned-historical-archives/cankaoxiaoxi/tree/main');
  const [path, setPath] = useState('1990');
  const [entries, setEntries] = useState<HF_FileEntry[]>([])
  const [next, setNext] = useState('')
  const update = useCallback(
    (async () => {
      const res = (await ((await fetch(`/api/get_file_list?repo=${encodeURIComponent(repo)}&path=${encodeURIComponent(path)}`)).json())) as HFRes;
      setEntries(res.entries);
      setNext(res.nextURL!);
    }), [repo, path]
  )
  useEffect(() => {
    update()
  }, [])
  return (
    <>
      <Head>
        <title>nextjs-docker-starter</title>
        <link rel="icon" href="/favicon.ico" />
        <meta name="description" content="Next.js in Docker on 🤗 Spaces" />
      </Head>

      <Container component="main" sx={{ minHeight: "90vh" }}>
        <Stack spacing={4} useFlexGap>
          <input value={repo} onChange={e => setRepo(e.target.value)}/>
          <input value={path} onChange={e => setPath(e.target.value)}/>
          <button onClick={update}>update</button>
          {entries.map(i => <div key={i.path} style={{display: 'flex'}}>
            <div style={{flex: 1}} onClick={() => {
              if (i.type =='directory') {
                setPath(i.path);
                setTimeout(update, 100);
              }
            }}>{basename(i.path)}</div>
            <div style={{flex: 1}}>{i.size}</div>
            <div style={{flex: 1}}>{i.type}</div>
          </div>)}
          {next ? 
          <button onClick={async () => {
            const data = await (await fetch(next)).json() as HFRes;
            setEntries([...entries, ...data.entries]);
            setNext(data.nextURL!)
          }}>more</button> : null}
        </Stack>
      </Container>

    </>
  );
}
