import React, { useEffect, useMemo, useRef, useState } from 'react'
import { Table, Spin, Menu, Dropdown, Button, Popconfirm, Icon, notification } from 'antd'
import { maxBy } from 'lodash'
import Prompt from '@/components/Prompt'
import { fetchList, fetch, apis } from '@/utils/request'
import BuildingRoomCell from './BuildingRoomCell'
import BuildingLevelCell from './BuildingLevelCell'
import BuildingUnitCell from './BuildingUnitCell'

const addNode = fetch(apis.buildingOwnerInfo.addNode)
const updateNode = fetch(apis.buildingOwnerInfo.updateNode)
const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)

const nvlIdStart = 'tmp'

export default props => {
  const [dataList, setDataList] = useState([])
  const [roomNum, setRoomNum] = useState(0)

  // 表格列
  const columns = useMemo(() => {
    const rooms = new Array(roomNum).fill()

    return [
      // 楼层字段
      {
        title: '#',
        dataIndex: 'levelName',
        key: 'levelName',
        width: 80,
        align: 'center',
        render: (t, row) => (
          <BuildingLevelCell
            dataSource={row}
            community={props.community}
            onHouseAdd={props.onHouseAdd}
            onEdit={props.onLevelEdit}
            onDelete={props.onLevelDelete}
          />
        )
      },
      ...rooms.map((_, index) => ({
        title: `房间 ${index + 1}`,
        dataIndex: `name-${index}`,
        key: `name-${index}`,
        align: 'center',      
        render: (t, row) => (
          <BuildingRoomCell
            dataSource={{
              ...row,
              id: row[`id-${index}`],
              name: row[`name-${index}`]
            }}
            community={props.community}
            onEdit={props.onHouseEdit}
            onDelete={props.onHouseDelete}
          />
        )
      }))
    ]
  }, [roomNum, props])
  
  useEffect(() => {
    const list = (props.dataSource || []).slice()
    if (!list.length) {
      return
    }

    // 找到 房间最多的那层, 然后所有的楼层都按照这个房间数造数据
    const maxRooms = maxBy(list, x => x.length)
    setRoomNum(maxRooms.length)

    // 合并同楼层的房间
    const zipedList = list.map(rooms => {
      return maxRooms.reduce((acc, _, index) => {
        const room = rooms[index] || {}

        return {
          ...acc,
          ...room,
          id: acc.id || room.id || `${nvlIdStart}-${Math.random().toString(36).substring(2)}`,
          [`id-${index}`]: room.id,
          [`name-${index}`]: room.name || '#'
        }
      }, {})
    })

    setDataList(zipedList)
  }, [props.dataSource])

  // 任意一个房间数据都可以
  // 因为所有房间的单元信息都是一样的
  const anyRoom = dataList[0]

  return (
    <div>
      <BuildingUnitCell
        dataSource={anyRoom}
        community={props.community}
        onLevelAdd={props.onLevelAdd}
        onEdit={props.onUnitEdit}
        onDelete={props.onUnitDelete}
      />
      <Table
        columns={columns}
        dataSource={dataList}
        pagination={false}
        rowKey="id"
        size="middle"
        bordered
      />
    </div>
  )
}
