import React from 'react';
import p from 'prefix-classname';
import zhCN from 'antd/lib/locale/zh_CN';
import { ConfigProvider } from 'antd';
import { CLS_PREFIX } from '../../config/const';
import Header, { useHeaderStatus } from '../components/header';
import Stage from '../components/stage';
import RightPanel from '../components/right-panel';
import LeftPanel from '../components/left-panel';
import { SharedProvider, useSharedProvider } from '@rcp/use.shared';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import './style.scss';
import createApi from '../components/stage/create-api';
import { createClientConnection } from './sse';
import { Button } from 'antd';
const cn = p('');
const c = p(`${CLS_PREFIX}`);
function CollapseBtn({ hide, dir, onClick }) {
    const title = hide ? '展开' : '收起';
    const style = {
        cursor: 'pointer',
        color: '#1890ff'
    };
    return (React.createElement("div", { onClick: onClick, className: c('__collapse', `-collapse-${dir}`, `-collapse-${hide ? 'hide' : 'show'}`) },
        React.createElement(Tooltip, { title: title },
            React.createElement(Button, { style: { padding: 0 }, size: 'small', shape: 'round', icon: (hide && dir === 'left') || (!hide && dir === 'right') ? (React.createElement(DoubleLeftOutlined, { style: style })) : (React.createElement(DoubleRightOutlined, { style: style })), type: 'link' }))));
}
const Body = ({ className, apiBaseURL, leftPanelProps, rightPanelProps, stageProps, bundlerURL }) => {
    const [mats, setMats] = React.useState([]);
    React.useEffect(() => {
        const conn = createClientConnection(apiBaseURL + 'sse');
        conn.addHandler((data) => {
            var _a;
            switch (data.type) {
                case 'set-materials': {
                    setMats((_a = data.data) !== null && _a !== void 0 ? _a : []);
                }
            }
        });
        //
        return () => {
            conn.close();
        };
    }, [apiBaseURL]);
    const api = React.useMemo(() => createApi(apiBaseURL), [apiBaseURL]);
    useSharedProvider(api, { key: 'api' });
    const [{ canSelect }] = useHeaderStatus();
    const [hideLeft, setHideLeft] = React.useState(false);
    const [hideRight, setHideRight] = React.useState(false);
    const hideChangedRef = React.useRef({ left: false, right: false });
    React.useEffect(() => {
        if (!hideChangedRef.current.left) {
            setHideLeft(!canSelect);
        }
        if (!hideChangedRef.current.right) {
            setHideRight(!canSelect);
        }
    }, [canSelect]);
    return (React.createElement("div", { className: cn(c(), className) },
        React.createElement(Header, { bundlerURL: bundlerURL }),
        React.createElement("div", { className: c('__main-content') },
            React.createElement("div", { className: c('__panel') },
                React.createElement(LeftPanel, Object.assign({}, leftPanelProps, { className: c('__l-panel', hideLeft && '-hide'), materials: mats })),
                React.createElement(CollapseBtn, { onClick: () => {
                        hideChangedRef.current.left = true;
                        setHideLeft((x) => !x);
                    }, hide: hideLeft, dir: 'left' })),
            React.createElement(Stage, Object.assign({ bundlerURL: bundlerURL }, stageProps, { className: c('__stage', hideLeft && `-stage-left-hide`, hideRight && '-stage-right-hide') })),
            React.createElement("div", { className: c('__panel') },
                React.createElement(RightPanel, Object.assign({}, rightPanelProps, { className: c('__r-panel', hideRight && '-hide') })),
                React.createElement(CollapseBtn, { onClick: () => {
                        hideChangedRef.current.right = true;
                        setHideRight((x) => !x);
                    }, hide: hideRight, dir: 'right' })))));
};
ConfigProvider.config({
    prefixCls: 'mmt-ant'
});
const Editor = React.memo((props) => {
    return (React.createElement(SharedProvider, null,
        React.createElement(ConfigProvider, { locale: zhCN, prefixCls: 'mmt-ant' },
            React.createElement(DndProvider, { backend: HTML5Backend },
                React.createElement(Body, Object.assign({}, props))))));
});
Editor.defaultProps = {
    apiBaseURL: 'http://localhost:8686/',
    bundlerURL: '/bundler.html'
};
export default Editor;
//# sourceMappingURL=index.js.map