import "./lofi.css";
export interface Input {
  file: MediaFile;
  hasCotyledonCookie: boolean;
}
export { meta, theme } from "./clofi.tsx";

<const/{ file: dir, hasCotyledonCookie } = input />
<const/{ path: fullPath, dirname, basename, kind } = dir />
<const/isRoot = fullPath == '/'>

<div#lofi>

<define/ListItem|{ value: file }|>
  <const/dir=file.kind === MediaFileKind.directory/>
  <const/meta=(
    dir
      ? formatSize(file.size)
      : (file.duration ?? 0) > 0
      ? formatDuration(file.duration!)
      : null
  )/>
  <li class={ dir }>
    <a href=`/file${escapeUri(file.path)}` >
      <code>${formatDate(file.date)}</>${" "}
      ${file.basenameWithoutExt}<span class="ext">${file.extension}</>${dir ? '/' : ''}
      <if=meta><span class='meta'>(${meta})</></>
    </a>
  </li>
</define>

<h1>
  <if=isRoot>clo's files</>
  <else>${fullPath}</>
</h1>

<if=isRoot>
  <const/{ readme, sections } = sort.splitRootDirFiles(dir, hasCotyledonCookie)  />
  <if=readme><ul><ListItem=readme/></ul></>
  <for|{key, files, titleColor }| of=sections>
    <h2 style={color: titleColor }>${key}</>
    <ul>
      <for|item| of=files><ListItem=item /></>
    </ul>
  </>
  <if=!hasCotyledonCookie>
    <br><br><br><br><br><br>
    <p style={ opacity: 0.3 }>
      would you like to
      <a
        href="/file/cotyledon"
        style={
          color: 'white',
          'text-decoration': 'underline',
        }
      >dive deeper?</a>
    </p>
  </>
</><else>
  <ul>
    <li><a href=`/file${escapeUri(path.posix.dirname(fullPath))}`>[up one...]</a></li>
    <for|item| of=dir.getChildren()> <ListItem=item /> </>
  </ul>
</>

</div>

import * as path from "node:path";
import { escapeUri, formatDuration, formatSize, formatDate } from "@/file-viewer/format.ts";
import { MediaFileKind } from "@/file-viewer/models/MediaFile.ts";
import * as sort from "@/file-viewer/sort.ts";