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

const cardTypes = ['管理', '执行', '运营']

const cards = [
  {
    title: '运营总览',
    count: 1,
    children: [
      { name: '运营总览', widget: 'OVERVIEW', type: '运营' }
    ]
  },
  {
    title: '水厂',
    count: 2,
    children: [
      { name: '水厂总览', widget: 'WATER_OVERVIEW', type: '运营' },
      { name: '供水量曲线', widget: 'WATER_CHART', type: '运营' },
    ]
  },
  {
    title: '管网',
    count: 4,
    children: [
      { name: '管网监控', widget: 'PIPEMONITORING', type: '运营' },
      { name: '管网采集', widget: 'PIPEGATHER', type: '运营' },
      { name: '管网巡检', widget: 'PIPEINSPECTION', type: '运营' },
      { name: '维修工单', widget: 'MAINTENANCEORDER', type: '运营' },
    ]
  },
  {
    title: '二供',
    count: 3,
    children: [
      { name: '二供总览', widget: 'OPERATIONAL_OVERVIEW', type: '运营' },
      { name: '泵房运行状态', widget: 'PUMP_STATUS', type: '运营' },
      { name: '泵房维修保养', widget: 'PUMP_MAINTAIN', type: '运营' },
    ]
  },
  {
    title: '营收',
    count: 1,
    children: [
      { name: '营收总览', widget: 'REVENUE_OVERVIEW', type: '运营' },
    ]
  }
]

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.cardType} type={props.type}>{props.type + '组件'}</div>
      <div className={styles.cardBox} widget={props.widget}></div>
      <div className={styles.swiper}>{props.name}</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 = () => {

  const { shema, setShema } = useContext(GlobalStore)
  const [cardType, setCardType] = useState(cardTypes)

  const cardsFilter = useMemo(() => {
    let array = []
    cards.forEach(v => {
      let children = v.children.filter(s => cardType.includes(s.type))
      if (children.length) {
        array.push({ ...v, children })
      }
    })
    return array
  }, [cards, cardType])

  const cardTypeChange = (value) => {
    setCardType(value)
  }

  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']} style={{ paddingBottom: '0' }}>卡片组件</div>
          <div className={styles['g-checks']}>
            <Checkbox.Group
              style={{ width: '100%' }}
              value={cardType}
              onChange={cardTypeChange}
            >
              <Row>
                {
                  cardTypes.map(v => {
                    return (
                      <Col key={v} span={8} style={{ display: 'flex', justifyContent: 'center' }}>
                        <Checkbox value={v}>{v}</Checkbox>
                      </Col>
                    )
                  })
                }
              </Row>
            </Checkbox.Group>
          </div>
          <div className={styles['g-content']}>
            {
              cardsFilter.map(v => {
                return (
                  <CardGroup key={v.title} {...v}>
                    {
                      v.children.map(s => <Card key={s.name} {...s}></Card>)
                    }
                  </CardGroup>
                )
              })
            }
          </div>
        </div>
      </div>
    </div>
  )

}

export default Left