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

const { GradientCard } = LayoutCard

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

  return (
    <ScrollIndicator scrollRef={scrollRef} step={258}>
      <Scrollbars
        ref={ref => ref && setScrollRef(ref)}
        autoHide
        autoHideTimeout={1000}
        autoHideDuration={200}
      >
        <WithDragDropContext>
          {
            StatisticsData.map((item, index) => {
              const wrapProps = onEdit ? { index, moveRow: (dragIndex, hoverIndex) => moveRow(dragIndex, hoverIndex, 'StatisticsData') } : {}
              return (
                <WrapComponent key={`${item.Code}-${index}`} {...wrapProps}>
                  <div className={classNames('statistic-board', { 'preventCover': horizontal && onEdit })} style={style}>
                    <GradientCard
                      checkable={onEdit}
                      checked={item.IsCheck}
                      onCheckedChange={checked => handleCheckedChange(checked, item)}
                      title={item.Name}
                      colors={gradientColors[index % gradientColors.length]}
                      contentClassName='statistic-board__content'
                      style={{ borderRadius: 4 }}
                    >
                      <IFComponent
                        IF={!!item.Data}
                        ELSE={
                          <IFComponent IF={onEdit} ELSE={<Empty />}>
                            <FakeBoard title={false} avatar={false} rows={1} style={{ height: 34 }} />
                          </IFComponent>
                        }
                      >
                        <div className='statistic-board__detail'>
                          <span>{item.Data?.Val}</span>
                          <span>{item.Data?.Unit}</span>
                        </div>
                      </IFComponent>
                    </GradientCard>
                  </div>
                </WrapComponent>
              )
            })
          }
        </WithDragDropContext>
      </Scrollbars>
    </ScrollIndicator>
  )
}

export default StatisticBoard