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, 'font-size': 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>*/}
                {/*<Header*/}
                {/*    style={{*/}
                {/*        padding: 0,*/}
                {/*        background: colorBgContainer,*/}
                {/*    }}*/}
                {/*>*/}
                {/*    <Button*/}
                {/*        type="text"*/}
                {/*        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}*/}
                {/*        onClick={() => setCollapsed(!collapsed)}*/}
                {/*        style={{*/}
                {/*            fontSize: '16px',*/}
                {/*            width: 64,*/}
                {/*            height: 64,*/}
                {/*        }}*/}
                {/*    />*/}
                {/*</Header>*/}
                {/*<Content*/}
                {/*    style={{*/}
                {/*        margin: '0px 0px',*/}
                {/*        padding: 0,*/}
                {/*        minHeight: 280,*/}
                {/*        background: 'white',*/}
                {/*        'border-style':'solid',*/}
                {/*        'border-color':'green',*/}
                {/*    }}*/}
                {/*>*/}
                {/*    <div className="App">*/}
                {/*    <Hlexical/>*/}
                {/*    </div>*/}

                {/*</Content>*/}



            {/*</Layout>*/}
        </Layout>
    );
};
export default Note;