import React, { useState, useEffect } from "react";
import { Col, Modal, Row, message, Spin } from "antd";
import { useDispatch } from "react-redux";
import { updateBlocklyXml, updateFileName } from "../../states/global";
import "../../asstes/css/header.css"
import axios from "axios";
import * as Blockly from 'blockly';

const contentStyle: React.CSSProperties = {
    padding: 50,
    background: 'rgba(0, 0, 0, 0.05)',
    borderRadius: 4,
};
const content = <div style={contentStyle} />;
export interface ExampleType {
    name: string;
    id: string;
    childrens?: ExampleType[];
    src?: string;
}
const Example = () => {
    const dispatch = useDispatch();
    const [messageApi, contextHolder] = message.useMessage();
    const [visible, setVisible] = useState(false);
    const [example1, setExample1] = useState<ExampleType[] | null>(null);
    const [example2, setExample2] = useState<any>([]);
    const [example3, setExample3] = useState<any>([]);
    const [switchNum, setSwitchNum] = useState(0);
    const [switchNum1, setSwitchNum1] = useState(0);
    const [loading, setLoading] = useState(false);
    const exampleList = [
        {
            name: "基础使用",
            id: "1",
            childrens: [
                {
                    name: "基础使用",
                    id: "1-1",
                    childrens: [
                        {
                            name: "按钮控制RGB灯",
                            id: "1-1-1",
                            src: "basic/test"
                        },
                        {
                            name: "按钮控制RGB灯",
                            id: "1-1-2",
                            src: "basic/test"
                        },

                    ]
                },
                {
                    name: "屏幕模块",
                    id: "1-2",
                    childrens: [
                        {
                            name: "屏幕显示Hello World",
                            id: "1-2-1",
                            src: "basic/test"
                        },
                        {
                            name: "自动换行",
                            id: "1-2-2",
                            src: "basic/test"
                        },

                    ]
                },
            ]
        },
        {
            name: "媒体处理",
            id: "2",
            childrens: [
                {
                    name: "图形处理",
                    id: "2-1",
                    childrens: [
                        {
                            name: "区域颜色分析",
                            id: "2-1-1",
                            src: "basic/test"
                        },
                        {
                            name: "循线",
                            id: "2-1-2",
                            src: "basic/test"
                        },

                    ]
                },
                {
                    name: "2-2",
                    id: "2-2",
                    childrens: [
                        {
                            name: "2-2-1",
                            id: "2-2-1",
                            src: "basic/test"
                        },
                        {
                            name: "1-2-2",
                            id: "1-2-2",
                            src: "basic/test"
                        },

                    ]
                },
            ]
        }
    ];
    useEffect(() => {
        setExample1(exampleList);
        setExample2(exampleList[0].childrens);
        setExample3(exampleList[0].childrens[0].childrens);
    }, []);

    const exampleSwitch1 = (item: any, num: number) => {
        console.log(item);
        setSwitchNum(num);
        setSwitchNum1(0);
        setExample2(item.childrens);
        setExample3(item.childrens[0].childrens);
    };

    const exampleSwitch2 = (item: any, num: number) => {
        setExample3(item.childrens);
        setSwitchNum1(num);
    };

    const openFile = (item: any) => {
        console.log(item);

        setVisible(false);
        // messageApi.success("样例加载成功", 1);
        setLoading(true);
        // window.open(item.src);
        axios.get('/example/' + item.src + ".xml").then(res => {
            console.log(res.data);
            let xml = res.data;
            if (isXmlFile(xml)) {
                window.blockly.clear();
                Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xml), window.blockly)
                dispatch(updateBlocklyXml(res.data));
                dispatch(updateFileName(item.name));
                setTimeout(() => {
                    setLoading(false);
                }, 1000)
            } else {
                console.log("不是xml文件")
            }

        }).catch(err => console.log(err))

    };

    const isXmlFile = (filename: string) => {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(filename, "text/xml");
        return xmlDoc.getElementsByTagName('parsererror').length === 0;
    }
    return (
        <div className="header-right-text">
            {contextHolder}
            <span style={{padding:"0 15px"}} onClick={() => setVisible(true)}>样例</span>

            <Modal className="example-modal" visible={visible} onCancel={() => setVisible(false)} width={1300} footer={null}
                title="样例" style={{ maxWidth: "80%", height: 700, maxHeight: "70%" }}>
                <Row gutter={16} className="example-box">
                    <Col span={8} className="example-box-col" >
                        {example1?.map((item, index) => (
                            <div className={switchNum === index ? "example-item example-item-active" : "example-item"} onClick={() => exampleSwitch1(item, index)} key={item.id}>{item.name}</div>
                        ))}
                    </Col>
                    <Col span={8} className="example-box-col" >
                        {example2?.map((item: any, index: number) => (
                            <div className={switchNum1 === index ? "example-item example-item-active" : "example-item"} onClick={() => exampleSwitch2(item, index)} key={item.id}>{item.name}</div>
                        ))}
                    </Col>
                    <Col span={8} className="example-box-col" >
                        {example3?.map((item: any) => (
                            <div className="example-item" onClick={() => openFile(item)} key={item.id}>{item.name}</div>
                        ))}
                        
                    </Col>
                </Row>
            </Modal>

            <Modal className="example-modal example-modal-loading" visible={loading} onCancel={() => setVisible(false)} footer={null}
            closeIcon={<></>}>
                <div style={{ textAlign: "center", marginTop: 50 }}>
                    <h3>样例加载中...</h3>
                </div>
                <Spin tip="Loading" size="large">
                    {content}
                </Spin>
            </Modal>
        </div>
    );
};

export default Example;