import React, { useState, useMemo, useRef } from 'react'
import { Divider, Modal, Col, Row, } from 'antd'
import DownOutlined from '@ant-design/icons/lib/icons/DownOutlined'
import ConditionQuery, { ConditionQueryRef } from './ConditionQuery'
import OptionQuery from './OptionQuery'
import ModalFooter from './ModalFooter'
import { CRUDProps, CRUDState } from '../../types'
import { Schema } from '../../../../types'
import { ADVANCED_FILTER_NAME, ConditionFilterData, DefaultTemplateData, FieldData, ShowFieldData, SortFieldData, GroupByFieldData } from './types'
import { uuidv4 } from '../../../../utils/helper'

interface AdvancedQueryProps {
  // 定义组件需要的props
  props: CRUDProps
  state: CRUDState
  advancedTitle: string
  showOptionQuery: boolean
  hideAdvancedFilter: () => void
}

const AdvancedQuery: React.FC<AdvancedQueryProps> = ({ props, state, ...otherProps }) => {

  const { advancedTitle, showOptionQuery, hideAdvancedFilter } = otherProps

  const { advancedFilter, advancedQueryFields, advancedFilterApi, columns = [], env, render, translate: __, classnames: cx, store } = props

  const { showAdvancedFilter } = state

  const advancedHeader = useMemo(() => {
    return advancedFilter.body.find((item: any) => item.name === ADVANCED_FILTER_NAME.HEADER)?.body ?? []
  }, [advancedFilter])

  const defaultHedaerData = useMemo(() => {
    const result: { [key: string]: any } = {}
    advancedHeader.forEach((item: any) => { result[item.name] = item.value ?? '' })
    return result
  }, [advancedHeader])

  const defaultFields = useMemo<FieldData[]>(() => {
    return columns
      .filter(column => !column.hidden && column.type !== 'operation')
      .map(column => ({
        type: column.type,
        label: `${column.groupName ? `${column.groupName} · ` : ''}${column.label}`,
        name: column.name,
        comparable: column.comparable ?? true,
        isNumerical: column.isNumerical
      }))
  }, [columns])

  const segmentFields = useMemo(() => {
    return defaultFields.filter(field => field.type == 'number' || field.type == 'date' || field.type == 'progress')
  }, [defaultFields])

  const [foldCondition, setFoldCondition] = useState(false)

  const [foldOption, setFoldOption] = useState(false)

  const [advancedHeaderData, setAdvancedHeaderData] = useState<Record<string, any>>({})

  const [advancedFilterDatas, setAdvancedFilterDatas] = useState<ConditionFilterData[]>([])

  const [caseSensitive, setCaseSensitive] = useState(true)

  const [topN, setTopN] = useState(3000)

  const [limitStatus, setLimitStatus] = useState(false)

  const [itemRepeat, setItemRepeat] = useState(false)

  const [itemCount, setItemCount] = useState(false)

  const [itemSumCount, setItemSumCount] = useState(false)

  const [showFields, setShowFields] = useState<ShowFieldData[]>(defaultFields.map(field => ({ ...field, checked: true, disabled: false })))

  const [sortFields, setSortFields] = useState<SortFieldData[]>([])

  const [groupByFields, setGroupByFields] = useState<GroupByFieldData[]>([])

  const [section, setSection] = useState(false)

  const [leftOpenRightClose, setLeftOpenRightClose] = useState(false)

  const [sectionField, setSectionField] = useState<string>(segmentFields[0]?.name)

  const [sectionNorm, setSectionNorm] = useState('')

  const [avgSection, setAvgSection] = useState(true)

  const [sectionWidthValue, setSectionWidthValue] = useState(1)

  const [sections, setSections] = useState<number[]>([])

  const ref = useRef<ConditionQueryRef>(null)

  const handleHeaderValueChange = (value: any, name: string) => {
    setAdvancedHeaderData(data => ({ ...data, [name]: value }))
  }

  const handleTemplateChange = (data: DefaultTemplateData) => {
    const { advancedHeader, advancedFilter, advancedFilterSub = [], caseSensitive, limitParam: { topN, limitStatus }, optionsParam } = data
    setAdvancedHeaderData(advancedHeader)
    // 默认值里如果包含前缀，说明是新版默认值数据，不用添加前缀
    if (advancedFilter.some(data => data.field.includes(ADVANCED_FILTER_NAME.FILTER) || data.field.includes(ADVANCED_FILTER_NAME.FILTER_SUB))) {
      setAdvancedFilterDatas(advancedFilter.map(data => ({ ...data, key: uuidv4() })))
    } else {
      // 旧版默认值是分开存储，要加上前缀
      const fn = (data: ConditionFilterData, name: string) => {
        const oldValues = data.values
        //处理旧版默认值比较字段
        if (data.compareField?.length && data.useFieldCompare && typeof oldValues == 'string' && oldValues.startsWith('(') && oldValues.endsWith(')')) {
          let result = oldValues.substring(1, oldValues.length - 1)
          data.compareField.forEach(compare => {
            const field = defaultFields.find(item => item.name === compare)
            if (field) result = result.replace(compare, `[${field.label}]`)
          })
          return { ...data, field: `${name}.${data.field}`, key: uuidv4(), values: result }
        }
        return { ...data, field: `${name}.${data.field}`, key: uuidv4() }
      }
      setAdvancedFilterDatas(advancedFilter.map(data => fn(data, ADVANCED_FILTER_NAME.FILTER)).concat(advancedFilterSub.map(data => fn(data, ADVANCED_FILTER_NAME.FILTER_SUB))))
    }
    // 新版默认值直接从data取
    if (typeof caseSensitive == 'boolean') {
      setCaseSensitive(caseSensitive)
    } else {
      // 旧版默认值从filter数组第一项
      setCaseSensitive(!!((advancedFilter[0] ?? advancedFilterSub[0])?.caseSensitive ?? true))
    }
    setTopN(topN)
    setLimitStatus(limitStatus)

    if (optionsParam) {
      const { itemRepeat, itemCount, itemSumCount, showFields, sortFields, groupByFields,
        section, sectionParams: { avgSection, leftOpenRightClose, sectionField, sectionNorm, sections }
      } = optionsParam
      setItemRepeat(itemRepeat)
      setItemCount(itemCount)
      setItemSumCount(itemSumCount)
      setShowFields(fields => fields.map(field => {
        const checked = showFields.length == 0 ? true : showFields.includes(field.name)
        const disabled = groupByFields.includes(field.name)
        return { ...field, checked, disabled }
      }))
      setSortFields(sortFields.flatMap<SortFieldData>(field => {
        const [fieldName, orderName] = field.split(',')
        const order = orderName === 'desc' ? 1 : 0
        const targetField = defaultFields.find(item => item.name === fieldName)
        return targetField ? { ...targetField, order } : []
      }))
      setGroupByFields(groupByFields.flatMap<GroupByFieldData>(field => defaultFields.find(item => item.name === field) ?? []))

      setSection(section)
      setLeftOpenRightClose(leftOpenRightClose)
      setSectionField(sectionField)
      setSectionNorm(sectionNorm)
      setAvgSection(avgSection)
      if (avgSection) {
        setSectionWidthValue(sections[0])
      } else {
        setSections(sections)
      }
    } else {
      //模板默认值没有optionsParam把选项查项置为默认
      setItemRepeat(false)
      setItemCount(false)
      setItemSumCount(false)
      setShowFields(defaultFields.map(field => ({ ...field, checked: true, disabled: false })))
      setSortFields([])
      setGroupByFields([])
      setSection(false)
      setLeftOpenRightClose(false)
      setSectionField(segmentFields[0]?.name)
      setSectionNorm('')
      setAvgSection(true)
      setSectionWidthValue(1)
      setSections([])
    }
  }

  const handleReset = (data?: DefaultTemplateData) => {
    if (data) {
      handleTemplateChange(data)
    } else {
      setAdvancedHeaderData(defaultHedaerData)
      const datas = ref.current?.getDefaultAdvancedFilterDatas() ?? []
      if (datas.length) setAdvancedFilterDatas(datas)
      setCaseSensitive(true)
      setLimitStatus(false)
      setTopN(3000)
      setSection(false)
      setItemRepeat(false)
      setItemCount(false)
      setItemSumCount(false)
      setShowFields(defaultFields.map(field => ({ ...field, checked: true, disabled: false })))
      setSortFields([])
      setGroupByFields([])
      setSection(false)
      setLeftOpenRightClose(false)
      setSectionField(segmentFields[0]?.name)
      setSectionNorm('')
      setAvgSection(true)
      setSectionWidthValue(1)
      setSections([])
    }
  }

  const handleConfirm = async () => {
    // 1.把区分大小写参数caseSentive写入advancedFilter,useCompareField的值加上括号()
    // 2.把advancedFilter的sub区分开
    // 3.显示字段全选，传空数组
    // 4.没勾选数据去重，仅查项数，仅查总数，分段查项且显示字段全选，不传optionsParam

    const values = await Promise.all(store.children
      .filter((model: any) => [ADVANCED_FILTER_NAME.HEADER, ADVANCED_FILTER_NAME.FILTER, ADVANCED_FILTER_NAME.FILTER_SUB].some(name => model.name?.startsWith(name)))
      .map((model: any) => model?.validate({})))

    if (values.some(value => !value)) return

    const result = {
      advancedHeader: advancedHeaderData,
      advancedFilter: advancedFilterDatas,
      caseSensitive,
      limitParam: { topN, limitStatus },
      optionsParam: {
        itemCount, itemRepeat, itemSumCount,
        showFields: showFields.filter(field => field.checked),
        sortFields,
        groupByFields,
        section,
        sectionParams: { avgSection, leftOpenRightClose, sectionField, sectionNorm, sections }
      }
    }
    console.log(result)
  }

  const renderChild = (control: Schema, index: number | string, value: any) => {
    const props = {
      formMode: 'horizontal',
      key: `${control.name}-${control.type}-${index}`,
      label: `${control.groupName ? `${control.groupName} · ` : ''}${control.label}`,
      value,
      onChange: handleHeaderValueChange
    };
    return render(`${control.name}-${index}`, control, props);
  }

  return (
    <Modal
      zIndex={9}
      title={__('CRUD.advancedFilter') + (advancedTitle ? ` - ${advancedTitle}` : '')}
      width={1000}
      className={'Modal-advanced common-modal-component'}
      bodyStyle={{ overflowY: 'auto' }}
      maskClosable={false}
      visible={showAdvancedFilter}
      onCancel={hideAdvancedFilter}
      getContainer={env.getTopModalContainer}
      footer={(
        <ModalFooter
          env={env}
          translate={__}
          classnames={cx}
          columnInfo={{
            advancedHeader: advancedHeaderData,
            advancedFilter: advancedFilterDatas,
            caseSensitive,
            limitParam: { topN, limitStatus },
            optionsParam: {
              itemCount, itemRepeat, itemSumCount,
              showFields: showFields.filter(field => field.checked).map(field => field.name),
              sortFields: sortFields.map(field => field.name),
              groupByFields: groupByFields.map(field => field.name),
              section,
              sectionParams: { avgSection, leftOpenRightClose, sectionField, sectionNorm, sections }
            }
          }}
          advancedFilterApi={advancedFilterApi}
          onChange={handleTemplateChange}
          onConfirm={handleConfirm}
          onReset={handleReset}
        />
      )}
    >
      <form className={cx(`Form`, `Form--horizontal`)}>
        <div className={'Modal-advanced-body'}>
          {(Array.isArray(advancedHeader) && advancedHeader.length > 0) && (
            <div className={'Modal-advanced-body-condition'}>
              <Row className='filter-row' gutter={24} style={{ margin: 0 }}>
                {advancedHeader.map((item: any, idx) => (
                  <Col key={item.name} style={{ padding: 0 }} span={12}>
                    {renderChild(item, idx, advancedHeaderData[item.name])}
                  </Col>
                ))}
              </Row>
            </div>
          )}
          {(Array.isArray(advancedFilterDatas) && advancedFilterDatas.length > 0) && (
            <Divider style={{ userSelect: 'none' }} orientation="left" orientationMargin={0} className="fold-query-text">
              条件查询 <DownOutlined rotate={foldCondition ? 270 : 0} onClick={() => { setFoldCondition(fold => !fold) }} />
            </Divider>
          )}
          <ConditionQuery
            visible={!foldCondition}
            render={render}
            env={env}
            classnames={cx}
            ref={ref}
            advancedQueryFields={advancedQueryFields}
            advancedFilter={advancedFilter}
            advancedFilterDatas={advancedFilterDatas}
            caseSensitive={caseSensitive}
            limitStatus={limitStatus}
            topN={topN}
            setAdvancedFilterDatas={setAdvancedFilterDatas}
            setCaseSensitive={setCaseSensitive}
            setLimitStatus={setLimitStatus}
            setTopN={setTopN}
          />
          {showOptionQuery && (
            <Divider style={{ userSelect: 'none' }} orientation="left" orientationMargin="0" className='fold-query-text'>
              选项查询 <DownOutlined rotate={foldOption ? 270 : 0} onClick={() => { setFoldOption(fold => !fold) }} />
            </Divider>
          )}
          {showOptionQuery && (
            <OptionQuery
              visible={!foldOption}
              segmentFields={segmentFields}
              itemRepeat={itemRepeat}
              itemCount={itemCount}
              itemSumCount={itemSumCount}
              showFields={showFields}
              sortFields={sortFields}
              groupByFields={groupByFields}
              section={section}
              leftOpenRightClose={leftOpenRightClose}
              sectionField={sectionField}
              avgSection={avgSection}
              sectionNorm={sectionNorm}
              sectionWidthValue={sectionWidthValue}
              sections={sections}
              setItemRepeat={setItemRepeat}
              setItemCount={setItemCount}
              setItemSumCount={setItemSumCount}
              setShowFields={setShowFields}
              setSortFields={setSortFields}
              setGroupByFields={setGroupByFields}
              setSection={setSection}
              setLeftOpenRightClose={setLeftOpenRightClose}
              setSectionField={setSectionField}
              setAvgSection={setAvgSection}
              setSectionNorm={setSectionNorm}
              setSectionWidthValue={setSectionWidthValue}
              setSections={setSections}
            />
          )}
        </div>
      </form>
    </Modal>
  )
};

export default AdvancedQuery;