import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Button, Checkbox, Input, InputNumber, InputRef, message, Select } from 'antd'
import { CloseOutlined } from '@ant-design/icons'
import { FieldData, ShowFieldData, SortFieldData, GroupByFieldData, SegmentStandardOptions } from './types'
import { Icon } from '../../../../components/icons'
import Sortable from 'sortablejs'

enum CheckAllOptionEnum {
  SELECT_ALL = '全选',
  SELECT_REVERSE = '反选',
  CLEAR_ALL = '全清'
}

interface IProps {
  visible: boolean
  segmentFields: FieldData[]
  itemRepeat: boolean
  itemCount: boolean
  itemSumCount: boolean
  showFields: ShowFieldData[]
  sortFields: SortFieldData[]
  groupByFields: GroupByFieldData[]
  section: boolean
  leftOpenRightClose: boolean
  sectionField: string
  avgSection: boolean
  sectionNorm?: string
  sectionWidthValue: number
  sections: number[]
  setItemRepeat: React.Dispatch<React.SetStateAction<boolean>>
  setItemCount: React.Dispatch<React.SetStateAction<boolean>>
  setItemSumCount: React.Dispatch<React.SetStateAction<boolean>>
  setShowFields: React.Dispatch<React.SetStateAction<ShowFieldData[]>>
  setSortFields: React.Dispatch<React.SetStateAction<SortFieldData[]>>
  setGroupByFields: React.Dispatch<React.SetStateAction<GroupByFieldData[]>>
  setSection: React.Dispatch<React.SetStateAction<boolean>>
  setLeftOpenRightClose: React.Dispatch<React.SetStateAction<boolean>>
  setSectionField: React.Dispatch<React.SetStateAction<string>>
  setAvgSection: React.Dispatch<React.SetStateAction<boolean>>
  setSectionNorm: React.Dispatch<React.SetStateAction<string>>
  setSectionWidthValue: React.Dispatch<React.SetStateAction<number>>
  setSections: React.Dispatch<React.SetStateAction<number[]>>
}

const OptionQuery: React.FC<IProps> = (props) => {

  const {
    visible, segmentFields, itemRepeat, itemCount, itemSumCount, showFields, sortFields, groupByFields,
    section, leftOpenRightClose, sectionField, avgSection, sectionNorm, sectionWidthValue, sections,
    setItemRepeat, setItemCount, setItemSumCount, setShowFields, setSortFields, setGroupByFields,
    setSection, setLeftOpenRightClose, setSectionField, setAvgSection, setSectionNorm, setSectionWidthValue, setSections
  } = props

  const [selectedShowField, setSelectedShowField] = useState<ShowFieldData>()

  const [sectionValue, setSectionValue] = useState(1)

  const [searchValue, setSearchValue] = useState('')

  const inputRef = useRef<InputRef>(null)

  const innerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const sortable = new Sortable(document.getElementById(`transfer-target-0`)!, {
      group: '.transfer-target-content',
      handle: '.item-label',
      animation: 150,
      onEnd: (e) => {
        const oldIndex = e.oldIndex
        const newIndex = e.newIndex
        if (oldIndex != undefined && newIndex != undefined) {
          setSortFields(fields => {
            const newFields = [...fields]
            const tempField = fields[oldIndex]
            newFields[oldIndex] = newFields[newIndex]
            newFields[newIndex] = tempField
            return newFields
          })
        }
      }
    })
    return () => {
      sortable.destroy()
    }
  }, [])

  // 勾选数据去重，仅查项数，仅查总数
  const handleCheckOption = (type: 'repeat' | 'count' | 'sumCount', checked: boolean) => {
    switch (type) {
      case 'repeat':
        setItemRepeat(checked)
        if (checked) {
          setShowFields(fields => fields.map(field => (field.comparable === false ? { ...field, checked: false } : field)))
        }
        break
      case 'count':
        setItemCount(checked)
        setSortFields([])
        if (checked) {
          setShowFields(fields => {
            if (fields.every(field => field.checked)) {
              return fields.map(field => ({ ...field, checked: false }))
            }
            return fields
          })
        }
        break
      case 'sumCount':
        setItemSumCount(checked)
        setShowFields(fields => {
          if (checked && fields.every(field => field.checked)) {
            setGroupByFields([])
            setSortFields([])
            return fields.map(field => ({ ...field, checked: field.type == 'number' || field.type == 'progress' }))
          }
          return fields
        })
        break
      default:
        break
    }
  }

  // 勾选全选，全清，反选
  const handleCheckAll = (option: CheckAllOptionEnum) => {
    const some = itemRepeat || itemCount || itemSumCount
    setShowFields(fields => {
      switch (option) {
        case CheckAllOptionEnum.SELECT_ALL:
          if (some) {
            return fields.map(field => (field.comparable === true && !field.disabled ? { ...field, checked: true } : field))
          } else {
            return fields.map(field => ({ ...field, checked: true }))
          }
        case CheckAllOptionEnum.CLEAR_ALL:
          return fields.map(field => ({ ...field, checked: field.disabled ? field.checked : (some ? false : field.disabled) }))
        case CheckAllOptionEnum.SELECT_REVERSE:
          return fields.map(field => ({ ...field, checked: !field.disabled ? !field.checked : field.checked }))
        default:
          return fields
      }
    })
  }

  // 勾选显示字段
  const handleCheckShowField = (showField: ShowFieldData, checked: boolean, isCheck: boolean) => {
    setSelectedShowField(field => {
      if (checked) {
        return showField
      } else {
        return field ? (field.name === showField.name ? undefined : showField) : showField
      }
    })
    inputRef.current?.focus()
    if (isCheck) {
      setShowFields(fields => fields.map(field => {
        if (field.name === showField.name) {
          return { ...field, checked }
        }
        return field
      }))
    }
  }

  const handleAddField = useCallback((type: 0 | 1, fields: SortFieldData[] | GroupByFieldData[]) => {
    if (selectedShowField) {
      if (type === 0) {
        const tempFields = fields.slice() as SortFieldData[]
        if (itemCount || itemSumCount) {
          message.warning('仅查项数,仅查总数不能使用字段排序')
          return
        }
        if (section && (selectedShowField.type != 'number' && selectedShowField.type != 'date' && selectedShowField.type != 'progress')) {
          message.warning('分段查询,非数字时间类型不能使用字段排序')
          return
        }
        if (!tempFields.some(field => field.name === selectedShowField.name)) {
          tempFields.push({ ...selectedShowField, order: 0 })
          setSortFields(tempFields)
        } else {
          message.warning('已添加过该字段')
        }
      } else {
        const tempFields = fields.slice() as GroupByFieldData[]
        if (!tempFields.some(field => field.name === selectedShowField.name)) {
          tempFields.push(selectedShowField)
          setGroupByFields(tempFields)
        } else {
          message.warning('已添加过该字段')
          return
        }
        setShowFields(fields => fields.map(field => {
          if (field.name === selectedShowField.name) {
            return { ...field, checked: true, disabled: true }
          }
          if (fields.every(field => field.checked)) {
            return { ...field, checked: field.isNumerical ?? false }
          }
          return field
        }))
      }
    }
  }, [selectedShowField])

  const handleDeleteField = (type: 0 | 1, names: string[]) => {
    if (type === 0) {
      setSortFields(fields => fields.filter(field => !names.includes(field.name)))
    } else {
      setGroupByFields(fields => fields.filter(field => !names.includes(field.name)))
      setShowFields(fields => fields.map(field => {
        const target = names.find(name => name === field.name)
        return target ? { ...field, checked: false, disabled: false } : field
      }))
    }
  }

  // 排序字段修改
  const handleSortField = (field: SortFieldData) => {
    setSortFields(fields => fields.map(sortField => {
      if (field.name === sortField.name) {
        return { ...sortField, order: (1 ^ sortField.order) as 0 | 1 }
      }
      return sortField
    }))
  }

  // 勾选分段查项
  const handleCheckSegment = (checked: boolean) => {
    if (checked) {
      setShowFields(fields => {
        if (fields.every(field => field.checked)) {
          return fields.map(field => {
            const isChecked = field.type == 'number' || field.type == 'date' || field.type == 'progress'
            if (!field.disabled) {
              return { ...field, checked: isChecked }
            }
            return field
          })
        }
        return fields
      })
    }
    setSection(checked)
  }

  //修改分段字段
  const handleChangeSectionField = (value: string) => {
    const field = segmentFields.find(field => field.name == value)
    if (field?.type !== 'date') {
      setSectionNorm('')
    } else {
      setSectionNorm('year')
    }
    setSectionField(value)
  }

  //添加段位列表
  const handleAddSections = useCallback(() => {
    setSections(sections => {
      if (sections.includes(sectionValue)) {
        message.warning('已添加过该段位')
        return sections
      }
      return sections.concat(sectionValue)
    })
  }, [sectionValue])

  const renderTarget = (type: 0 | 1, fields: SortFieldData[] | GroupByFieldData[]) => {
    const sortDisabled = !!!selectedShowField?.comparable || itemSumCount || itemCount
    const groupDisabled = !!!selectedShowField?.comparable || itemSumCount
    const disabledBtn = type == 0 ? sortDisabled : groupDisabled
    return (
      <div className={`target-box`}>
        <div className="btn-group">
          <div
            style={{ cursor: disabledBtn ? 'not-allowed' : 'pointer' }}
            className={` btn`}
            onClick={disabledBtn ? undefined : () => handleAddField(type, fields)}
          >
            <i className='fa fa-chevron-right' />
          </div>
        </div>
        <div className="transfer-target">
          <div className="transfer-target-header">
            <span className="title">{type === 0 ? '排序字段' : '分组字段'}</span>
            <Button type='link' onClick={() => handleDeleteField(type, fields.map(field => field.name))}>清空</Button>
          </div>
          <div className={`transfer-target-content`}>
            <div className='option' id={`transfer-target-${type}`}>
              {type === 0 && (fields as SortFieldData[]).map((field, index) => (
                <span className='option-item' key={field.name}>
                  <span className='item-title'>{index + 1}</span>
                  <span onClick={() => { handleSortField(field) }}>
                    <Icon icon={`${field.order === 0 ? '#icon-toolshunxu' : '#icon-tooldaoxu'}`} symbol ></Icon>
                  </span>
                  <span className='item-label'>{field.label}</span>
                  <CloseOutlined onClick={() => handleDeleteField(type, [field.name])} />
                </span>
              ))}
              {type === 1 && (fields as GroupByFieldData[]).map((field, index) => (
                <div className='option-item' key={field.name}>
                  <span className='item-title'>{index + 1}</span>
                  <span className='item-label'>{field.label}</span>
                  <CloseOutlined onClick={() => handleDeleteField(type, [field.name])} />
                </div>
              ))}
            </div>
            {type === 1 && <div className='transfer-target-footer'>建议选择少于8个分组字段 </div>}
          </div>
        </div>
      </div>
    )
  }

  return visible ? (
    <div className='transfer-check'>
      <div className='transfer-check-group'>
        <Checkbox checked={itemRepeat} onChange={e => handleCheckOption('repeat', e.target.checked)}>数据去重</Checkbox>
        <Checkbox checked={itemCount} disabled={itemSumCount} onChange={e => handleCheckOption('count', e.target.checked)}>仅查项数</Checkbox>
        <Checkbox checked={itemSumCount} disabled={itemCount} onChange={e => handleCheckOption('sumCount', e.target.checked)}>仅查总数</Checkbox>
      </div>
      <div className='transfer-container'>
        <div className='transfer-source'>
          <div className="transfer-source-header">
            <span className="title">显示字段</span>
            <div className="option-group">
              {Object.values(CheckAllOptionEnum).map((value, index) => <div key={index}><span className="option" onClick={() => handleCheckAll(value)}>{value}</span>&nbsp;&nbsp;</div>)}
            </div>
          </div>
          <div className='transfer-source-position'>
            <Input ref={inputRef} onKeyDown={(e) => {
              //键盘事件后清空值，后续重新输入
              e.stopPropagation()
              if (e.key === 'Enter') {
                setTimeout(() => {
                  setSearchValue('')
                }, 500)
              }
            }}
              onCompositionEnd={(e) => {
                setTimeout(() => {
                  setSearchValue('')
                }, 500)
              }}
              onBlur={() => setSearchValue('')} value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)} />
          </div>
          <div className="transfer-source-content">
            <div className="source-content-inner" ref={innerRef}>
              {showFields.map(field => (
                <section key={field.name} className={selectedShowField?.name === field.name ? 'display-field display-field-active' : 'display-field'} >
                  <Checkbox disabled={field.disabled} checked={field.checked} onChange={e => handleCheckShowField(field, e.target.checked, true)} />
                  <span className='display-field-label' onClick={() => { handleCheckShowField(field, false, false) }}>{field.label}</span>
                </section>
              ))}
            </div>
          </div>
        </div>
        <div className='transfer-target-group'>
          {renderTarget(0, sortFields)}
          {renderTarget(1, groupByFields)}
        </div>
      </div>
      <div style={{ margin: '5px 0' }}>
        <Checkbox disabled={itemSumCount} checked={section} onChange={e => handleCheckSegment(e.target.checked)}>分段查询</Checkbox>
        {section && <Checkbox checked={leftOpenRightClose} onChange={e => setLeftOpenRightClose(e.target.checked)}>区间左开右闭</Checkbox>}
      </div>
      {section && (
        <div className='transfer-segment-container'>
          <div className='left-content'>
            <div className='segment-select'>
              <div className='segment-select-item'>
                <span>分段字段</span>
                <Select
                  style={{ width: 150, marginLeft: 10 }}
                  dropdownClassName={`dropdown-select-style`}
                  value={sectionField}
                  onChange={value => handleChangeSectionField(value)}
                >
                  {segmentFields.map(field => <Select.Option key={field.name} value={field.name}>{field.label}</Select.Option>)}
                </Select>
              </div>
              <div className='segment-select-item'>
                <span>类型</span>
                <Select<boolean>
                  style={{ width: 150, marginLeft: 10 }}
                  value={avgSection}
                  onChange={setAvgSection}
                  dropdownClassName={`dropdown-select-style`}
                >
                  <Select.Option value={true}>平均段位</Select.Option>
                  <Select.Option value={false}>自定义段位</Select.Option>
                </Select>
              </div>
              <div className='segment-select-item'>
                <span>分段标准</span>
                <Select
                  value={sectionNorm}
                  onChange={setSectionNorm}
                  disabled={segmentFields.find(field => field.name == sectionField)?.type !== 'date'}
                  style={{ width: 150, marginLeft: 10 }}
                  dropdownClassName={`dropdown-select-style`}
                >
                  {SegmentStandardOptions.map(option => <Select.Option key={option.value} value={option.value}>{option.title}</Select.Option>)}
                </Select>
              </div>
              <div className='segment-select-item'>
                <span>{avgSection ? '宽度' : '段位'}</span>
                {avgSection ?
                  <InputNumber value={sectionWidthValue} onChange={value => setSectionWidthValue(value ?? 0)} min={0} type={'number'} style={{ width: 150, marginLeft: 10 }} /> :
                  <InputNumber value={sectionValue} onChange={value => setSectionValue(value ?? 0)} type={'number'} style={{ width: 150, marginLeft: 10 }} />}
              </div>
            </div>
          </div>
          {!avgSection && (
            <div className='right-content'>
              <div className='target-box'>
                <div className="btn-group">
                  <div style={{ cursor: false ? 'not-allowed' : 'pointer' }} className="btn" onClick={handleAddSections}>
                    <i className='fa fa-chevron-right' />
                  </div>
                </div>
                <div className="transfer-target">
                  <div className="transfer-target-header">
                    <span className="title">段位列表</span>
                  </div>
                  <div className="transfer-target-content">
                    <div className="target-content-inner">
                      {sections.map(section => (
                        <div className='option-item' key={section}>
                          <span className='item-label'>{section}</span>
                          <i className='fa fa-times' onClick={() => setSections(sections => sections.filter(item => item != section))} />
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </div >
  ) : null
}

export default OptionQuery