import { Element, Frame, useEditor } from '@craftjs/core';
import { Splitter } from 'antd';
import { SettingPanel } from './settingPanel';
import { ToolBox } from './toolBox';
import { Tools } from './tools';
import styles from './styles.module.less';
import { useEffect, useState } from 'react';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
type StageProps = {
  initData?: string;
};
const Stage = ({ initData }: StageProps) => {
  const [leftCollapsed, setLeftCollapsed] = useState(false);
  const [rightCollapsed, setRightCollapsed] = useState(false);
  useEffect(() => {
    console.log('initData', initData)
  }, [])
  const { preview, actions, query } = useEditor((state) => ({ preview: !state.options.enabled, }));
  return (
    <div className={styles.mainDiv}>
      <div className={styles.headerDiv}>IAS Editor <Tools /></div>
      <div className={styles.contentDiv}>
        {!preview && (
          <div id='component-panel' className={leftCollapsed ? styles.leftPanelCollapsed : styles.leftPanel}>
            {!leftCollapsed && (<div className={styles.toolBoxDiv}><ToolBox /></div>)}
            <div className={styles.leftCollapseBtn} onClick={() => setLeftCollapsed(!leftCollapsed)}>
              {leftCollapsed ? <RightOutlined style={{ fontSize: '12px' }} /> : <LeftOutlined style={{ fontSize: '12px' }} />
              }
            </div>
          </div>
        )}

        <div id='design-canvas' className={styles.canvasDiv}>
          <Frame data={initData}>
            <Element canvas is="div" className={styles.elementDiv} />
          </Frame>
        </div>
        {!preview && (
          <div id='property-panel' className={rightCollapsed ? styles.rightPanelCollapsed : styles.rightPanel}>
            {!rightCollapsed && (<div className={styles.settingPanelDiv}><SettingPanel /></div>)}
            <div className={styles.rightCollapseBtn} onClick={() => setRightCollapsed(!rightCollapsed)}>
              {rightCollapsed ? <LeftOutlined style={{ fontSize: '12px' }} /> : <RightOutlined style={{ fontSize: '12px' }} />
              }
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
export { Stage };