import React, {useEffect, useRef, useState} from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import {Layout, Menu, Button, theme, Avatar, Tabs} from 'antd';
import Hlexical from './Hlexical';
import ItemTree from "../../components/ItemTree";
import './index.less'
import store from "../../redux/store";
import {isEmpty} from "../../utils/ObjectUtils";

const {Header, Sider, Content} = Layout;
const Note = () => {
    const [collapsed, setCollapsed] = useState(false);
    //   const {
    //     token: { colorBgContainer },
    //   } = theme.useToken();
    const colorBgContainer = '#800080'
    const [activeKey, setActiveKey] = useState();
    const [items, setItems] = useState([]);
    const newTabIndex = useRef(0);
    store.subscribe(() => {
            const openFile = store.getState().clickFileMessage.data;
            console.log("store.getState().clickFileMessage.data:",openFile,items)
            if (!isEmpty(openFile)&&activeKey!==openFile.filePath){
                setActiveKey(openFile.filePath)
            }
            if (items.filter(fileItem => fileItem.key === openFile.filePath).length === 0&& !isEmpty(openFile)) {
                setItems([...items,
                    {
                        label: openFile.fileName,
                        children: <div className="HlexicalName"><Hlexical filePath={openFile.filePath} /></div>,
                        key: openFile.filePath,
                    }
                ])
            }
        }
    )
    const onChange = (newActiveKey) => {
        setActiveKey(newActiveKey);
    };
    const add = () => {
        const newActiveKey = `newTab${newTabIndex.current++}`;
        const newPanes = [...items];
        newPanes.push({
            label: 'New Tab',
            children: <div className="HlexicalName"><Hlexical /></div>,
            key: newActiveKey,
        });
        setItems(newPanes);
        setActiveKey(newActiveKey);
    };
    const remove = (targetKey) => {
        let newActiveKey = activeKey;
        let lastIndex = -1;
        items.forEach((item, i) => {
            if (item.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const newPanes = items.filter((item) => item.key !== targetKey);
        if (newPanes.length && newActiveKey === targetKey) {
            if (lastIndex >= 0) {
                newActiveKey = newPanes[lastIndex].key;
            } else {
                newActiveKey = newPanes[0].key;
            }
        }
        setItems(newPanes);
        setActiveKey(newActiveKey);
    };
    const onEdit = (targetKey, action) => {
        if (action === 'add') {
            add();
        } else {
            remove(targetKey);
        }
    };

    return (
        <Layout>
            <Sider margin='5' collapsed='true'>
                <div>
                    <Avatar size={60} src='http://localhost/20231114150555.jpg' icon={<UserOutlined/>}/>
                </div>
                <div>
                    <p style={{color: colorBgContainer, 'fontSize': 60}}>上善若水</p>
                </div>
            </Sider>
            <Sider trigger={null} collapsedWidth={0} collapsible collapsed={collapsed}>
                <ItemTree></ItemTree>
            </Sider>
            <Layout>
                <Tabs
                    type="editable-card"
                    onChange={onChange}
                    activeKey={activeKey}
                    onEdit={onEdit}
                    items={items}
                />
            </Layout>
        </Layout>
    );
};
export default Note;