import React, {useRef, useState} from 'react';
import {
    UserOutlined,
} from '@ant-design/icons';
import {Layout, Avatar, Tabs} from 'antd';
import Hlexical from './Hlexical';
import ItemTree from "../../components/ItemTree";
import './index.less'
import {useSelector, useDispatch} from "react-redux";
import {addTableBarItem, removeTableBarItem, setActiveKey,updatedSavedFile} from "../../redux/tableBarItem_reducer"

const {Sider} = 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)
    let filePath = useSelector(state => state.dirMessage.data);
    const onChange = (newActiveKey) => {
        console.log("setActiveKey(newActiveKey)",newActiveKey)
        dispatch(setActiveKey({"activeKey":newActiveKey}));
    };
    const add = () => {
        const newActiveKey = `newTab${newTabIndex.current++}`;
        dispatch(addTableBarItem(
            {
                label: 'New Tab',
                // children: "",
                key: newActiveKey,
                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;
            }
        }
        dispatch(setActiveKey({"activeKey":newActiveKey}));
    };
    const onEdit = (targetKey, action) => {
        if (action === 'add') {
            add();
        } else {
            remove(targetKey);
        }
    };

    return (
        <Layout>
            <Sider margin='5' collapsedWidth={0} 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} width={217} collapsible collapsed={collapsed}
                   style={{overflow:"auto"}}>
                <ItemTree filePath={filePath}></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;