import React, { useEffect, useRef, useState } from 'react'
import { Button, Popover } from 'antd'
import { Checkbox, Switch } from '../../../components'
import { isNil } from 'lodash'
import { functionInOneFrame, isMobile, standardValueText } from '../../../utils/helper'
import SwitchControl from '../../Form/Switch'
import DateControl from '../../Form/InputDate'
import { MappingField } from '../../Mapping'
import TextControl from '../../Form/InputText'
import NumberControl from '../../Form/InputNumber'
import { makeTranslator } from '../../../locale'
import { evalExpression } from '../../../utils/tpl'
import { EventEnum, EventSub } from '../../../utils/sub'
import { FormulaTplControlRenderer } from '../../Form/Formula'
import { Icon } from '../../../components/icons'


export enum SimpleSpanType {
  Switch = 'switch',
  InputDate = 'input-date',
  Mapping = 'mapping',
  InputText = 'input-text',
  InputNumber = 'input-number',
  LionFormula = 'lion-formula'
}

// 样式缓存 防止你每次都重新渲染
const ClassCache = {

}
export const fakeQuickEdit = [SimpleSpanType.Switch, SimpleSpanType.InputText, SimpleSpanType.InputNumber, SimpleSpanType.InputDate]

const createClass = (classNames: string[], classFn: ((...res: string[]) => string)) => {
  if (ClassCache[classNames.join(' ')]) return ClassCache[classNames.join(' ')]
  else {
    ClassCache[classNames.join(' ')] = classFn(...classNames)
    return ClassCache[classNames.join(' ')]
  }
}

export const SimpleSpan: React.FC<any> = ({ render, tableId, itemIndex, value, multiple, column, ns, item, cx }: { value: any, column: any, ns: string, item: any, tableId: string, multiple: boolean, render: (...rest: string[]) => any, itemIndex: string, cx: (...rest: string[]) => string, classPrefix: string }) => {

  const pristine = column.pristine
  const simpleTextRef = useRef<HTMLDivElement | null>(null)
  // const [isOverflow, setIsOverflow] = useState(false)
  // const [popOverVisable, setPopOverVisable] = useState(false)
  const { prefix, suffix, kilobitSeparator, precision, showUppercase = 0 } = pristine
  const baseParam = { classnames: cx, value, classPrefix: ns || 'cxd-' }
  const editCellParam = { ...item, ...column.pristine, ...column.pristine.quickEdit, ...baseParam }
  const cellParam = { ...item, ...column.pristine, ...baseParam }
  const valueType = typeof value
  const disabled = column.pristine.disabledOn && evalExpression(column.pristine.disabledOn, item.data) // 快速编辑条件
  const canEdit = !disabled && (!column.pristine.quickEditEnabledOn || evalExpression(column.pristine.quickEditEnabledOn, item.data)) // 快速编辑条件

  // 如果有快速编辑 快速编辑优先返回
  if (column.pristine.quickEdit && canEdit && fakeQuickEdit.includes(editCellParam.type)) {
    let quickEditCell
    switch (editCellParam.type) {
      case SimpleSpanType.Switch:
        quickEditCell = <SwitchControl  {...(editCellParam as any)}></SwitchControl>
        break
      case SimpleSpanType.InputText:
        quickEditCell = <TextControl onChange={() => {
          EventSub.emit(`${tableId}/${EventEnum.ShowVistiMap}`, itemIndex + 1, item.data?.colIndex, true)
        }} selectedOptions={[]} className={'Form-control'} translate={makeTranslator()}  {...(editCellParam as any)}></TextControl>
        break
      case SimpleSpanType.InputNumber:
        quickEditCell = <NumberControl onChange={() => {
          EventSub.emit(`${tableId}/${EventEnum.ShowVistiMap}`, itemIndex + 1, item.data?.colIndex, true)
        }} className={'Form-control'} translate={makeTranslator()}  {...(editCellParam as any)}></NumberControl>
        break
      case SimpleSpanType.InputDate:
        quickEditCell = <DateControl strictMode={false} timeFormat={''} dateFormat={'YYYY-MM-DD'} placeholder={'Date.placeholder'} {...(editCellParam as any)}></DateControl>
        break
    }
    if (quickEditCell) {
      return <div style={{ width: editCellParam.width }} className={createClass(['Form', 'Form--normal', 'Form--quickEdit'], cx)}><div data-role="form-item" className={createClass(['Form-item', 'Form-item--normal', 'ReadOnly-item'], cx)}>{quickEditCell}</div></div>
    }
  }
  switch (column.type) {
    // 检查特殊处理 没有移上去就不用那么复杂的样式 
    case '__checkme': {
      return <Checkbox
        classPrefix={ns}
        type={multiple ? 'checkbox' : 'radio'}
        checked={item?.checked}
        disabled={!!!item?.checkable}
      />
    }
    // 公式简单标识
    case SimpleSpanType.LionFormula: {
      return <FormulaTplControlRenderer onChange={() => { }} {...cellParam} render={render} ></FormulaTplControlRenderer>
    }
    // 键值对类型特殊处理
    case SimpleSpanType.Mapping: {
      return <MappingField {...cellParam} render={render} ></MappingField>
    }
    // 图片特殊处理-已弃用 因为需求要求不切回去 简单的就没什么用了
    case 'lion-upload': {
      return <div> {value?.info?.map?.((_: any) => {
        return <img width={28} height={28} key={_.thumbnailAddr || _.src} onError={(event) => {
          try {
            if ((event.target as any)?.style)
              (event.target as any).style.opacity = 0
          } catch { }
        }} src={_.thumbnailAddr || _.src} />
      }) || null}</div>
    }
    // 操作栏特殊处理-已弃用 主要因为样式和功能太难对

    case 'operation': {
      return <div className={createClass(['OperationField'], cx)}>{[...pristine.buttons?.slice?.(0, pristine.num)?.map((_: any) => {
        const buttonDisable = evalExpression(_.disabledOn, item.data)
        // console.log(_, buttonDisable)
        return <Button disabled={buttonDisable} className={createClass(['Button', buttonDisable ? 'is-disabled' : '', `Button--${_.level}`, 'date-range-confirm', `Button--${_.size}`], cx)} key={_.label} type={'text'}>{_.label}</Button>
      }), column.pristine.num < column.pristine.buttons.length ? <span className={createClass(['Button--link', 'extendBtn', 'rotate'], cx)}>
        {'···'}
      </span> : '']}</div>
    }
  }
  switch (valueType) {
    case 'object':
      // 空值返回 '-'
      if (value === undefined || value === null)
        return <div style={{ width: editCellParam.width, display: 'contents' }}><span> - </span></div>
      return <span>{'复杂类型'}</span>
    default:
      const showValue = !isNil(value) ? standardValueText(value, { prefix, suffix, kilobitSeparator, precision, showUppercase }) : ''
      return <div className={createClass(['Tpltab'], cx)} style={{ width: '100%' }}>
        <span
          ref={simpleTextRef}
          title={showValue} className={createClass(['PlainField'], cx)}>{showValue}</span>
        {/* {(isOverflow && !isMobile()) ?
          <Popover
            content={<>
              <div className={cx('Footer-tplPop')}>
                <div>
                  <span title={showValue} >{showValue}</span>
                </div>
                <Button size='small' style={{ borderRadius: 5 }} onClick={() => setPopOverVisable(false)}>
                  {'关闭'}
                </Button>
              </div>
            </>}
            trigger={'click'}
            visible={popOverVisable}
            overlayClassName={cx('TplPop')}
            autoAdjustOverflow
            destroyTooltipOnHide
            placement={'leftTop'}
            onVisibleChange={(visible) => { setPopOverVisable(visible) }}
          >
            <Icon
              style={{
                position: 'relative',
                left: '-20px',
                top: '5px',
                background: 'white',
              }}
              onClick={(e: Event) => e.stopPropagation()} icon="provincial" className={[cx('TplSaving'), 'icon'].join(' ')} />
          </Popover>
          : ''} */}
      </div>
  }
}