import React, { useState, useEffect } from 'react'
import { Button, Icon, Checkbox, Card, notification } from 'antd'
import BuildingTypeDetail from './BuildingTypeDetail'
import request, { apis } from '@/utils/request'

const gridStyle = {
  width: '25%',
  // textAlign: 'center',
};

const gridBtn = {
  lineHeight: 'inherit',
  border: 'none',
  height: 'auto',
  margin: '0',
  padding: '0',
}

const fillTypeName = (data, typeList) => (data || []).map((it) => {
  const typ = typeList.filter((x) => x.buildingTypeId === it.buildingTypeId)[0]
  return {
    ...it,
    buildingTypeName: typ ? typ.buildingTypeName : it.buildingTypeName
  }
})

export default React.forwardRef((props, ref) => {
  const {value, onChange} = props;
  const [showDrawer, setShowDrawer] = useState(false)
  const [curRow, setCurRow] = useState()
  const [curBuildingType, setBuildingType] = useState()
  const [typeList, setTypeList] = useState([])

  const handleChange = (buildingType) => (e) => {
    const current = (value || []).filter((it) => it.buildingTypeId === buildingType.buildingTypeId)[0] || {buildingTypeId: buildingType.buildingTypeId}
    const checked = e.target.checked

    // 打开 form 表单
    if (checked) {
      setCurRow(current)
      setBuildingType(buildingType)
      setShowDrawer(true)
    } else {
      // 取消选择
      const data = (value || []).filter((it) => it.buildingTypeId !== buildingType.buildingTypeId)
      onChange(fillTypeName(data, typeList))
    }
  }

  const handleClick = (buildingType) => () => {
    const current = (value || []).filter((it) => it.buildingTypeId === buildingType.buildingTypeId)[0] || {buildingTypeId: buildingType.buildingTypeId}
    setCurRow(current)
    setBuildingType(buildingType)
    setShowDrawer(true)
  }

  const handleClose = () => {
    setCurRow()
    setBuildingType()
    setShowDrawer(false)
  }

  const handleSubmit = (val) => {
    const data = []
    let found = false
    for (let it of (value || [])) {
      if (it.buildingTypeId === val.buildingTypeId) {
        found = true
        data.push(val)
      } else {
        data.push(it)
      }
    }

    if (!found) {
      data.push(val)
    }

    onChange(fillTypeName(data, typeList))
    setShowDrawer(false)
  }

  useEffect(() => {
    // 请求类型列表
    request({ ...apis.buildingType.getList, params: { pageNum: 1, pageSize: 999 } }).then(res => {
      setTypeList(res.records)
    }).catch((err) => {
      notification.error({ message: err.message })
    })
  }, [])

  return (
    <Card bordered={false}>
      {
        typeList.map((it) => {
          const checked = !!(value || []).filter((x) => it.buildingTypeId === x.buildingTypeId)[0]
          return (
            <Card.Grid style={gridStyle} key={it.buildingTypeId} hoverable={false}>
              <Checkbox
                checked={checked}
                onChange={handleChange(it)}
              />
              <span style={{display: 'inline-block', margin: '0 .5em'}}>{it.buildingTypeName}</span>
              {checked && <Button style={gridBtn} type="link" onClick={handleClick(it)}><Icon type="edit" /></Button>}              
            </Card.Grid>
          )
        })
      }
      <BuildingTypeDetail
        title={curBuildingType?.buildingTypeName}
        dataset={curRow}
        visible={showDrawer}
        onClose={handleClose}
        onSubmit={handleSubmit}
      />
    </Card>
  )
})
