import React, { useState, createContext } from 'react'
import { useDrag, useDrop, DndProvider } from 'react-dnd'
import { Button } from 'antd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import styles from './index.less'
import Left from './Left'
import Container from './Container'
import Right from './Right'

export const GlobalStore = createContext(null)

const initShema = {
  work: [],
  active: true,
  type: '运营组件',
}
const Designer = (props) => {

  const { currentCard, } = props
  const [shema, setShema] = useState(currentCard['卡片结构'] ? { ...JSON.parse(currentCard['卡片结构']) } : initShema)

  const goBack = () => {
    props?.goBack?.()
  }

  const saveDesgin = () => {
    console.log('shema', shema)
    props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema), })
  }

  return (
    <DndProvider backend={HTML5Backend}>
      <GlobalStore.Provider
        value={{ shema, setShema }}
      >
        <div className={styles.designer}>
          <div className={styles.top}>
            <Button style={{ marginRight: '10px' }} onClick={goBack}>返回</Button>
            <Button type="primary" onClick={saveDesgin}>保存</Button>
          </div>
          <div className={styles.bottom}>
            <Left></Left>
            <Container></Container>
            <Right></Right>
          </div>
        </div>
      </GlobalStore.Provider>
    </DndProvider>
  )

}

export default Designer