import React, { useState, useRef } from 'react'
import { connect } from 'dva'
import { Scrollbars } from 'react-custom-scrollbars'
import { Empty, Icon, Carousel } from 'antd'
import { IFComponent, LayoutCard } from '@woowalker/feui'
import FakeBoard from '../components/FakeBoard'
import WithDragDropContext from '../../common/WithDragDropContext'
import { DragDropCard } from '../../../utils/withDragDropContext'
import config from '../../../config'
import './hmiBoard.less'
import storage from '../../../utils/storage'
const autoplaySpeed = 3000
const tenant = storage('lacal').getItem('Tenant').val
const orgId = storage('lacal').getItem('webOrgId').val
function HMIBoard (props) {
  /**
   * HMI 跑马灯展示
   */
  const slider = useRef(null)
  const handleSliderChange = (index) => {
    if (index === HmiData.length - 1 && slider.current) {
      setTimeout(() => {
        slider.current.goTo(0)
      }, autoplaySpeed)
    }
  }

  /**
   * HMI 全屏显示
   */
  const [fullscreen, setFullscreen] = useState(false)
  const handleFullscreen = () => {
    setFullscreen(!fullscreen)
    props.onFullscreen instanceof Function && props.onFullscreen(!fullscreen)
  }

  const { onEdit, HmiData, moveRow, handleCheckedChange, style } = props
  if (onEdit) {
    return (
      <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
        <WithDragDropContext>
          {
            HmiData.map((item, index) => {
              return (
                <DragDropCard
                  key={`${item.Code}-${index}`}
                  index={index}
                  moveRow={(dragIndex, hoverIndex) => moveRow(dragIndex, hoverIndex, 'HmiData')}
                >
                  {/** Dragable 要求第一个 children 必须为纯标签 */}
                  <div className='hmi-board' style={{ style }}>
                    <LayoutCard
                      checkable
                      checked={item.IsCheck}
                      onCheckedChange={checked => handleCheckedChange(checked, item)}
                      title={item.Name}
                      className='hmi-board__card'
                    >
                      <FakeBoard />
                    </LayoutCard>
                  </div>
                </DragDropCard>
              )
            })
          }
        </WithDragDropContext>
      </Scrollbars>
    )
  }

  return (
    <div className='hmi-carousel'>
      <Carousel
        autoplay
        pauseOnDotsHover
        ref={slider}
        infinite={false}
        autoplaySpeed={autoplaySpeed}
        afterChange={handleSliderChange}
      >
        {
          HmiData.map((item, index) => {
            const url = `${config.hmiUrl}preview?code=${!fullscreen && item.Thumb ? item.Thumb : item.Code}&sysCode=optiEnergy&hideTool=true&tenant=${tenant}&orgId=${orgId}`
            return (
              <div key={`${item.Code}-${index}`} className='hmi-board' style={{ style }}>
                <LayoutCard title={item.Name} className='hmi-board__card'>
                  <IFComponent IF={!!item.Code} ELSE={<Empty />}>
                    <iframe id='hmi-board__iframe' className='hmi-board__iframe' title='hmi' src={url} />
                  </IFComponent>
                </LayoutCard>
                <div
                  title={fullscreen ? '收起' : '展开'}
                  onClick={handleFullscreen}
                  className='hmi-board__fullscreen'
                >
                  <Icon type={fullscreen ? 'fullscreen-exit' : 'fullscreen'} style={{ fontSize: 26, color: '#096dd9' }} />
                </div>
              </div>
            )
          })
        }
      </Carousel>
    </div>
  )
}

export default connect(({ app }) => ({ app }))(HMIBoard)