import React, {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'
const { Header, Sider, Content } = Layout;


const initialItems = [
    {
        label: 'Tab 1',
        children: <div className="HlexicalName"><Hlexical/></div>,
        key: '1',
    },
    {
        label: 'Tab 2',
        children: 'Content of Tab 2',
        key: '2',
    },
    {
        label: 'Tab 3',
        children: 'Content of Tab 3',
        key: '3',
        closable: false,
    },
];

const Note = () => {
    const [collapsed, setCollapsed] = useState(false);
    //   const {
    //     token: { colorBgContainer },
    //   } = theme.useToken();
    const colorBgContainer = '#800080'


    const [activeKey, setActiveKey] = useState(initialItems[0].key);
    const [items, setItems] = useState(initialItems);
    const newTabIndex = useRef(0);
    const onChange = (newActiveKey) => {
        setActiveKey(newActiveKey);
    };
    const add = () => {
        const newActiveKey = `newTab${newTabIndex.current++}`;
        const newPanes = [...items];
        newPanes.push({
            label: 'New Tab',
            children: 'Content of new Tab',
            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;