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> = (props: { value: any, column: any, ns: string, item: any, tableId: string, multiple: boolean, render: (...rest: string[]) => any, itemIndex: string, cx: (...rest: string[]) => string, classPrefix: string, env: any, primaryField?: string, prefixContent?: any }) => {
  const { render, tableId, itemIndex, value, multiple, column, ns, item, cx, env, primaryField, prefixContent } = props;
  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)) // 快速编辑条件
  const [isOverflowing, setIsOverFlowing] = useState(false)
  const [overFlowVisible, setOverFlowVisible] = useState(false)

  useEffect(() => {
    if (!isMobile() && (['plain', 'static-text'].includes(pristine.type) || !pristine.type) && simpleTextRef.current) {
      let isOverflowing = simpleTextRef.current.scrollWidth > simpleTextRef.current.clientWidth;
      if (isOverflowing) {
        setIsOverFlowing(true)
      }
    }
  }, [])

  // 如果有快速编辑 快速编辑优先返回
  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={createClass(['Form-control'], cx)} 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={createClass(['Form-control'], cx)} 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: '100%' }} 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 <span className={createClass(['MappingField'], cx)}>
        {prefixContent}
        {isNil(value) ? '-' : (value + '')?.split(',').map((singleValue: string) => {
          const mappingValue = !isNil(column?.map?.[singleValue] || singleValue) ? (column?.map?.[singleValue] || singleValue) : '-'
          return <span
            className={createClass(['TplField'], cx)}><span title={mappingValue} dangerouslySetInnerHTML={{ __html: mappingValue }}></span></span>
        })}
      </span>

    }
    // 图片特殊处理-已弃用 因为需求要求不切回去 简单的就没什么用了
    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>{prefixContent} - </span></div>
      return <span>{prefixContent}{'复杂类型'}</span>
    default:
      const showValue = !isNil(value) ? standardValueText(value, { prefix, suffix, kilobitSeparator, precision, showUppercase }) : ''
      return <div className={createClass(['Tpltab'], cx)} style={{ width: '100%' }}>
        {isOverflowing ? <>
          <span title={showValue} className={createClass(['PlainField'], cx)}>{prefixContent}{showValue}</span>
          <Popover
            content={<span className={createClass(['PlainField'], cx)}>{showValue}</span>}
            trigger={'click'}
            visible={overFlowVisible}
            overlayClassName={cx('TplPop')}
            getPopupContainer={env.getModalContainer}
            autoAdjustOverflow
            destroyTooltipOnHide
            placement={'rightTop'}
            onVisibleChange={(visible) => setOverFlowVisible(visible)}
            title={
              <div className={cx('Title-tplPop')} onClick={(e) => e.stopPropagation()}>
                <div>{column?.label + ": " + (primaryField ? (isNil(item?.data?.[primaryField]) ? '' : item?.data?.[primaryField]) : '')}</div>
                <div> <Icon icon="close" className="icon" style={{ cursor: 'pointer' }} onClick={() => setOverFlowVisible(false)} /></div>
              </div>
            }
          >
            <Icon onClick={(e: Event) => e.stopPropagation()} icon="provincial" className={[cx('TplSaving'), 'icon']} />
          </Popover>
        </>
          : <span
            ref={simpleTextRef}
            title={showValue} className={createClass(['PlainField'], cx)}>{prefixContent}{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>
  }
}