import {Button, Input, makeStyles, Text, tokens, Tooltip} from "@fluentui/react-components";
import {useStoreBucket} from "../../store/bucket";
import {ArchiveRegular, ArrowCurveUpLeftFilled} from "@fluentui/react-icons";
import {useStoreFile} from "../../store/file";
import React, {ChangeEvent, useState} from "react";
import {debounce} from 'lodash'
import {useStoreConnection} from "../../store/connection";

const useStyles = makeStyles({
    container: {
        height: '4rem',
        width: '100%',
        borderBottom: '1px solid lightgray',
        display: 'flex',
        alignItems: 'center',
    },
    show: {
        marginLeft: '0.5rem',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
    },
    show_text: {
        backgroundColor: tokens.colorNeutralBackground1Hover,
        padding: '0.5rem 0.5rem',
        borderRadius: '0.5rem',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        marginLeft: '0.5rem',
        '&:hover': {
            textDecoration: 'none',
            backgroundColor: tokens.colorNeutralBackground1Pressed,
        },
    },
    op_up: {},
    filter_prefix: {
        margin: '0.5rem',
    },
})

export function Path() {
    const styles = useStyles()
    const {conn_active} = useStoreConnection()
    const {bucket_active} = useStoreBucket()
    const {prefix, files_get} = useStoreFile()

    async function handleClickUp() {

    }


    const handleFilterChange = debounce((e) => {
        console.log('[DEBUG] e =', e)
        files_get(conn_active!, bucket_active!, prefix + e.target.value)
    }, 500)

    return <div className={styles.container}>
        {bucket_active && (
            <>
                <div className={styles.show}>
                    <Tooltip content="返回上一级" relationship="label">
                        <Button className={styles.op_up}
                                onClick={async () => {
                                    await handleClickUp()
                                }}
                                size="small" icon={<ArrowCurveUpLeftFilled/>}/>
                    </Tooltip>
                    <Text className={styles.show_text}><ArchiveRegular
                        style={{marginRight: '0.5rem'}}/>{bucket_active.name}</Text>
                    {prefix && (
                        prefix.split("/").filter(item => item).map(item => {
                            return <>
                                <Text style={{marginLeft: '0.5rem'}}>/</Text>
                                <Text className={styles.show_text}>{item}</Text>
                            </>
                        })
                    )}
                </div>
                <div className={styles.filter_prefix}>
                    <Input
                        onChange={(e) => {
                            handleFilterChange(e)
                        }}
                        placeholder={"输入前缀过滤"}
                        contentBefore={<Text>/</Text>}
                    />
                </div>
            </>
        )}
    </div>
}
