import 'antd/dist/antd.less'
import React, { useMemo, useEffect } from 'react'
import {
  Designer, //设计器根组件，用于下发上下文
  DesignerToolsWidget, //画板工具挂件
  ViewToolsWidget, //视图切换工具挂件
  Workspace, //用于创建 Workspace 组件，工作区组件，核心组件，用于管理工作区内的拖拽行为，树节点数据等等...
  OutlineTreeWidget, //大纲树组件，它会自动识别当前工作区，展示出工作区内树节点
  ResourceWidget, // 资源组件，可拖拽组件展示区
  HistoryWidget, // 历史记录组件
  StudioPanel, // Designer 子组件
  CompositePanel, //左侧组合布局面板
  WorkspacePanel, //工作区布局面板
  ToolbarPanel, //工具栏布局面板
  ViewportPanel, //视口布局面板
  ViewPanel, //视图布局面板
  SettingsPanel, //右侧配置表单布局面板
  ComponentTreeWidget, //组件树渲染器
} from '@designable/react'
import {
  SettingsForm,
  setNpmCDNRegistry,
} from '@designable/react-settings-form'
import { createDesigner, Shortcut, KeyCode } from '@designable/core'
import {
  // ActionsWidget,
  PreviewWidget,
  SchemaEditorWidget,
  MarkupSchemaWidget,
  PageView,
} from './widgets'
import { saveSchema } from './service'
import {
  Form,
  Field,
  Input,
  Select,
  TreeSelect,
  Cascader,
  Radio,
  Checkbox,
  Slider,
  Rate,
  NumberPicker,
  Transfer,
  Password,
  DatePicker,
  TimePicker,
  Upload,
  Switch,
  Text,
  Card,
  ArrayCards,
  ObjectContainer,
  ArrayTable,
  Space,
  FormTab,
  FormCollapse,
  FormLayout,
  FormGrid,
  Jsondata,
  Route,
} from '@designable/formily-antd'
import { Button } from 'antd'
import { useDesigner, TextWidget } from '@designable/react'
import { observer } from '@formily/react'
import { loadInitialSchema } from './service'
import {
  transformToSchema,
} from '@designable/formily-transformer'
import {getFunctionIdListApi} from './config/api'
setNpmCDNRegistry('//unpkg.com')

export const Config = (props) => {
  const { schema, RouteList, saveSettingData } = props.props
  console.log('配置页面参数----', props, schema, saveSettingData)
  saveSettingData('123')
  // 回显组件传递过来的渲染数据
  // localStorage.setItem('RouteList', JSON.stringify(RouteList))
  localStorage.setItem('formily-schema', JSON.stringify(schema))
  getFunctionIdListApi({
    osName: 'ares-update-2.1_v_3',
    appName: ''
  }).then((res)=>{
    const resData = res.data|| []; 
    let newDataArr = resData.map((list)=>{
      return {children:[],label:list,value:list}
    })
    localStorage.setItem('RouteList', JSON.stringify(newDataArr))
  }).catch(()=>{
    localStorage.setItem('RouteList', JSON.stringify([]))
  })

  const ActionsWidget = observer(() => {
    const designer = useDesigner()
    useEffect(() => {
      loadInitialSchema(designer)
    }, [])
    return (
      <Button
          onClick={() => {
            const aa = JSON.stringify(transformToSchema(designer.getCurrentTree()))
            saveSettingData(aa); //触发父组件保存
          }}
        >
          保存
        </Button>
    )
  })
  const engine = useMemo(
    () =>
      createDesigner({
        shortcuts: [
          new Shortcut({
            codes: [
              [KeyCode.Meta, KeyCode.S],
              [KeyCode.Control, KeyCode.S],
            ],
            handler(ctx) {
              saveSchema(ctx.engine)
            },
          }),
        ],
        rootComponentName: 'Form',
      }),
    []
  )
  return (
    <Designer engine={engine}>
      <StudioPanel actions={<ActionsWidget />}>
        <CompositePanel>
          <CompositePanel.Item title="panels.Component" icon="Component">
            <ResourceWidget
              title="通用控件"
              sources={[
                Input,
                Password,
                NumberPicker,
                // Rate,
                // Slider,
                Select,
                // TreeSelect,
                // Cascader,
                // Transfer,
                Checkbox,
                Radio,
                // DatePicker,
                // TimePicker,
                // Upload,
                Switch,
                // ObjectContainer,
                Jsondata,
              ]}
            />
            <ResourceWidget title="业务组件" sources={[Route]} />
            {/* <ResourceWidget
              title="自增组件"
              sources={[ArrayCards, ArrayTable]}
            />
            <ResourceWidget title="展示组件" sources={[Text]} /> */}
          </CompositePanel.Item>
          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
            <OutlineTreeWidget />
          </CompositePanel.Item>
          <CompositePanel.Item title="panels.History" icon="History">
            <HistoryWidget />
          </CompositePanel.Item>
        </CompositePanel>
        {/* <PageView /> */}
        <Workspace id="form">
          <WorkspacePanel>
            <ToolbarPanel>
              <DesignerToolsWidget />
              <ViewToolsWidget
                use={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']}
              />
            </ToolbarPanel>
            <ViewportPanel>
              <ViewPanel type="DESIGNABLE">
                {() => (
                  <ComponentTreeWidget
                    components={{
                      Form,
                      Field,
                      Input,
                      Select,
                      TreeSelect,
                      Cascader,
                      Radio,
                      Checkbox,
                      Slider,
                      Rate,
                      NumberPicker,
                      Transfer,
                      Password,
                      DatePicker,
                      TimePicker,
                      Upload,
                      Switch,
                      Text,
                      Card,
                      ArrayCards,
                      ArrayTable,
                      Space,
                      FormTab,
                      FormCollapse,
                      FormGrid,
                      FormLayout,
                      ObjectContainer,
                      Jsondata,
                    }}
                  />
                )}
              </ViewPanel>
              <ViewPanel type="JSONTREE" scrollable={false}>
                {(tree, onChange) => (
                  <SchemaEditorWidget tree={tree} onChange={onChange} />
                )}
              </ViewPanel>
              <ViewPanel type="MARKUP" scrollable={false}>
                {(tree) => <MarkupSchemaWidget tree={tree} />}
              </ViewPanel>
              <ViewPanel type="PREVIEW">
                {(tree) => <PreviewWidget tree={tree} />}
              </ViewPanel>
            </ViewportPanel>
          </WorkspacePanel>
        </Workspace>
        <SettingsPanel title="panels.PropertySettings">
          <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
        </SettingsPanel>
      </StudioPanel>
    </Designer>
  )
}