import { Button, Link, Text, Popover } from '@geist-ui/core'
import FileIcon from '@geist-ui/icons/fileText'
import CodeIcon from '@geist-ui/icons/fileFunction'
import styles from './dropdown.module.css'
import { useCallback, useEffect, useRef, useState } from "react"
import { codeFileExtensions } from "@lib/constants"
import ChevronDown from '@geist-ui/icons/chevronDown'
import ShiftBy from "@components/shift-by"
import type { File } from '@lib/types'

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

const FileDropdown = ({
    files,
    isMobile
}: {
    files: File[],
    isMobile: boolean
}) => {
    const [expanded, setExpanded] = useState(false)
    const [items, setItems] = useState<Item[]>([])
    const changeHandler = (next: boolean) => {
        setExpanded(next)
    }

    const onOpen = useCallback(() => {
        setExpanded(true)
    }, [])

    const onClose = useCallback(() => {
        setExpanded(false)
        // contentRef.current?.focus()
    }, [])

    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])

    const content = useCallback(() => (<ul className={styles.content}>
        {items.map(item => (
            <li key={item.id} onClick={onClose}>
                <a href={`#${item.title}`}>
                    <ShiftBy y={5}><span className={styles.fileIcon}>
                        {item.icon}</span></ShiftBy>
                    <span className={styles.fileTitle}>{item.title ? item.title : 'Untitled'}</span>
                </a>
            </li>
        ))}
    </ul>
    ), [items, onClose])

    // a list of files with an icon and a title
    return (
        <>
            <Button auto onClick={onOpen} className={styles.button} iconRight={<ChevronDown />} style={{ textTransform: 'none' }} >
                Jump to {files.length} {files.length === 1 ? 'file' : 'files'}
            </Button>
            <Popover
                style={{ transform: isMobile ? "translateX(110px)" : "translateX(-75px)" }}
                onVisibleChange={changeHandler}
                content={content} visible={expanded} hideArrow={true} onClick={onClose} />
        </>

    )
}

export default FileDropdown