import React, {useEffect, useRef, useState} from 'react';
import {
    UserOutlined,
} 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";
import {useSelector, useDispatch} from "react-redux";
import {addTableBarItem, removeTableBarItem, setActiveKey} from "../../redux/tableBarItem_reducer"

const {Header, Sider, Content} = Layout;
const Note = () => {
    const dispatch = useDispatch()
    const [collapsed, setCollapsed] = useState(false);
    //   const {
    //     token: { colorBgContainer },
    //   } = theme.useToken();
    const colorBgContainer = '#800080'
    const newTabIndex = useRef(0);

    const activeKey=useSelector(state => state.tableBarItem.activeKey);
    const items = useSelector(state => state.tableBarItem.data)

    const onChange = (newActiveKey) => {
        console.log("setActiveKey(newActiveKey)",newActiveKey)
        dispatch(setActiveKey({"activeKey":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);
        dispatch(addTableBarItem(
            {
                label: 'New Tab',
                children: "",
                key: newActiveKey,
            }
        ));
        dispatch(setActiveKey({"activeKey":newActiveKey}));
    };
    const remove = (targetKey) => {
        console.log("remove = (targetKey):",targetKey)
        let newActiveKey = activeKey;
        let lastIndex = -1;
        items.forEach((item, i) => {
            if (item.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        dispatch(removeTableBarItem(targetKey));
        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;
            }
        }
        console.log("remove = (newActiveKey):",newActiveKey)
        // setItems(newPanes);
        dispatch(setActiveKey({"activeKey":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.map(item=>{return {label:item.label,children: <div className="HlexicalName"><Hlexical  filePath={item.children}/></div>,key:item.key}})}
                />
            </Layout>
        </Layout>
    );
};
export default Note;