import React, { useState } from 'react'
import { Scrollbars } from 'react-custom-scrollbars'
import { Table, Empty } from 'antd'
import { IFComponent, LayoutCard } from '@woowalker/feui'
import ScrollIndicator from '../components/ScrollIndicator'
import FakeBoard from '../components/FakeBoard'
import WithDragDropContext from '../../common/WithDragDropContext'
import { DragDropCard } from '../../../utils/withDragDropContext'
import './rankBoard.less'

function RankBoard (props) {
  const { onEdit, RankingData, moveRow, handleCheckedChange, style } = props
  const WrapComponent = onEdit ? DragDropCard : React.Fragment
  // 不用 useRef 是因为 useRef 好像在 ScrollIndicator 中不生效
  const [scrollRef, setScrollRef] = useState(null)

  const [contentHeight, setContentHeight] = useState(0)
  return (
    <ScrollIndicator scrollRef={scrollRef} step={278}>
      <Scrollbars
        ref={ref => ref && setScrollRef(ref)}
        autoHide
        autoHideTimeout={1000}
        autoHideDuration={200}
      >
        <WithDragDropContext>
          {
            RankingData.map((item, index) => {
              const wrapProps = onEdit ? { index, moveRow: (dragIndex, hoverIndex) => moveRow(dragIndex, hoverIndex, 'RankingData') } : {}
              return (
                <WrapComponent key={`${item.Code}-${index}`} {...wrapProps}>
                  {/** Dragable 要求第一个 children 必须为纯标签 */}
                  <div className='rank-board' style={style}>
                    <LayoutCard
                      checkable={onEdit}
                      checked={item.IsCheck}
                      onCheckedChange={checked => handleCheckedChange(checked, item)}
                      onSize={({ contentHeight }) => { setContentHeight(contentHeight) }}
                      title={item.Name}
                      className='rank-board__card'
                    >
                      <IFComponent
                        IF={!!item.Data}
                        ELSE={
                          <IFComponent IF={onEdit} ELSE={<Empty />}>
                            <FakeBoard />
                          </IFComponent>
                        }
                      >
                        <div className='rank-board__table'>
                          <Table
                            rowKey='ID'
                            pagination={false}
                            scroll={{ y: contentHeight - 41 }}
                            columns={item.Data?.columns.map(col => {
                              if (col.width) {
                                return {
                                  ...col,
                                  render: (text) => {
                                    const style = { width: `${col.width}px`, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
                                    return <div style={style}>{text}</div>
                                  }
                                }
                              }
                              return col
                            })}
                            dataSource={item.Data?.dataSource}
                          />
                        </div>
                      </IFComponent>
                    </LayoutCard>
                  </div>
                </WrapComponent>
              )
            })
          }
        </WithDragDropContext>
      </Scrollbars>
    </ScrollIndicator>
  )
}

export default RankBoard