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

const getNanoid = (len = 10) => {
  var orgStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let returnStr = "";
  for (var i = 0; i < len; i++) {
    returnStr += orgStr.charAt(Math.floor((Math.random() * orgStr.length)));
  }
  return `${returnStr}`
}

const Group = (props) => {

  const id = getNanoid()
  const ref = useRef(null)

  const [{ dragging }, drag, dragPreview] = useDrag({
    type: 'box',
    item: {
      id: id,
      name: '通栏布局',
      widget: '通栏布局',
      children: []
    },
    collect(monitor) {
      return {
        dragging: monitor.isDragging()
      }
    }
  });

  drag(ref)

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

  return (
    <div
      ref={ref}
      className={styles.group}
      style={{ border: dragging ? '2px solid #001bff' : '' }}
      onClick={() => boxClick()}
    >
    </div>
  )
}

const Card = (props) => {

  const ref = useRef(null)
  const id = getNanoid()

  const [{ dragging }, drag] = useDrag({
    type: 'card',
    item: {
      id: id,
      name: props.name,
      widget: props.widget,
    },
  })

  drag(ref)

  return (
    <div
      ref={ref}
      className={styles.card}
    >
      <div
        className={styles.cardBox}
        widget={props.widget}
      >
      </div>
    </div>
  )
}

//卡片分组
const CardGroup = (props) => {

  const [shrink, setShrink] = useState(false)

  return (
    <div className={styles.cardGroup}>
      <div className={styles['g-top']} onClick={() => setShrink(!shrink)}>
        <CaretRightOutlined style={{ transition: '0.5s all', transform: !shrink ? 'rotate(90deg)' : '' }} />
        <span>{props.title}</span>
        <span>{`(${props.count})`}</span>
      </div>
      <div className={styles['g-cards']} style={{ height: shrink ? '0px' : 'unset' }}>
        {props.children}
      </div>
    </div>
  )

}

const Left = () => {

  return (
    <div className={styles.left}>
      <div className={styles.header}>组件库</div>
      <div className={styles['l-content']}>
        <div className={styles.item}>
          <div className={styles['g-title']}>布局</div>
          <div className={styles['g-content']}>
            <Group></Group>
          </div>
        </div>
        <div className={styles.item}>
          <div className={styles['g-title']}>卡片组件</div>
          <div className={styles['g-content']}>
            <CardGroup title={'运营总览'} count={1}>
              <Card name={'运营总览'} widget={'OVERVIEW'}></Card>
            </CardGroup>
            <CardGroup title={'水厂'} count={2}>
              <Card name={'水厂总览'} widget={'WATER_OVERVIEW'}></Card>
              <Card name={'供水量曲线'} widget={'WATER_CHART'}></Card>
            </CardGroup>
            <CardGroup title={'管网'} count={4}>
              <Card name={'管网监控'} widget={'PIPEMONITORING'}></Card>
              <Card name={'管网采集'} widget={'PIPEGATHER'}></Card>
              <Card name={'管网巡检'} widget={'PIPEINSPECTION'}></Card>
              <Card name={'维修工单'} widget={'MAINTENANCEORDER'}></Card>
            </CardGroup>
            <CardGroup title={'二供'} count={4}>
              <Card name={'二供总览'} widget={'OPERATIONAL_OVERVIEW'}></Card>
              <Card name={'泵房运行状态'} widget={'PUMP_STATUS'}></Card>
              <Card name={'泵房维修保养'} widget={'PUMP_MAINTAIN'}></Card>
            </CardGroup>
            <CardGroup title={'营收'} count={1}>
              <Card name={'营收总览'} widget={'REVENUE_OVERVIEW'}></Card>
            </CardGroup>
          </div>
        </div>
      </div>
    </div>
  )

}

export default Left