import React, { useRef, useContext } from 'react'
import styles from './index.less'
import { DownOutlined } from '@ant-design/icons'
import { useDrag, useDrop, DndProvider } from 'react-dnd'
import { GlobalStore } from '../index'
import Group from './Group'
import moment from 'moment'

const Container = (props) => {

  const currentDate = moment().format('YYYY-MM-DD')
  const ref = useRef(null)
  const { shema, setShema } = useContext(GlobalStore)

  const [, drop] = useDrop(() => {
    return {
      accept: 'box',
      drop(box) {
        setShema(boxs => ({ ...boxs, work: [...boxs.work, box] }))
      }
    }
  })

  drop(ref)

  const pageClick = () => {
    let array = []
    shema?.work.forEach(v => {
      array.push({ ...v, active: false, children: v.children.map(s => ({ ...s, active: false })) })
    })
    setShema({ ...shema, work: array, active: true })
  }

  return (
    <div
      className={styles.container}
    >
      <div className={styles.content}>
        <div
          ref={ref}
          className={styles.moblie}
          onClick={() => pageClick()}
          active={`${shema.active}`}
        >
          <div className={styles.moblieCenter} name={shema.theme}>
            <div className={styles['m-info']}>
              <div className={styles['i-company']}>
                <span className={styles['c-address']}></span>
                <span>永吉水务有限公司</span>
                <DownOutlined style={{ fontSize: '12px', marginLeft: '5px' }} />
              </div>
              <div className={styles['i-date']}>
                <span></span>
                <span>{currentDate}</span>
                <DownOutlined style={{ fontSize: '12px', marginLeft: '5px' }} />
              </div>
            </div>
            <div style={{ padding: '10px' }}>
              {
                shema?.work?.map((v, i) => <Group key={v.id} index={i} {...v} />)
              }
            </div>
          </div>
        </div>
      </div>
    </div>
  )

}

export default Container