import { File } from "@lib/types"
import { Card, Link, Text } from "@geist-ui/core"
import FileIcon from "@geist-ui/icons/fileText"
import CodeIcon from "@geist-ui/icons/fileLambda"
import styles from "./file-tree.module.css"
import ShiftBy from "@components/shift-by"
import { useEffect, useState } from "react"
import { codeFileExtensions } from "@lib/constants"

type Item = File & {
	icon: JSX.Element
}

const FileTree = ({ files }: { files: File[] }) => {
	const [items, setItems] = useState<Item[]>([])
	useEffect(() => {
		const newItems = files.map((file) => {
			const extension = file.title.split(".").pop()
			if (codeFileExtensions.includes(extension || "")) {
				return {
					...file,
					icon: <CodeIcon />
				}
			} else {
				return {
					...file,
					icon: <FileIcon />
				}
			}
		})
		setItems(newItems)
	}, [files])

	// a list of files with an icon and a title
	return (
		<div className={styles.fileTreeWrapper}>
			<Card height={"100%"} className={styles.card}>
				<div className={styles.cardContent}>
					<Text h4>Files</Text>
					<ul className={styles.fileTree}>
						{items.map(({ id, title, icon }) => (
							<li key={id}>
								<Link color={false} href={`#${title}`}>
									<ShiftBy y={5}>
										<span className={styles.fileTreeIcon}>{icon}</span>
									</ShiftBy>
									<span className={styles.fileTreeTitle}>{title}</span>
								</Link>
							</li>
						))}
					</ul>
				</div>
			</Card>
		</div>
	)
}

export default FileTree