import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, InputNumber, List, Tabs } from 'antd';
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { RendererEnv } from '../../env';
import { TranslateFn } from '../../locale';
import { SchemaNode } from '../../types';
import Checkbox from '../Checkbox';
import { Icon } from '../icons';
import ActionSheet from './ActionSheet';

const { TabPane } = Tabs;

interface AdvancedProps {
  filtersArr: FiltersArr
  filtersHeader: FiltersHeader[]
  filtercont: any
  filter: any
  handleChange: (value: any, name: string, submit: boolean, changePristine: boolean,
    type: any) => void
  hideAdvancedFilter: () => void
  handleOptionTransfer: () => JSX.Element
  addFilter: () => void
  filterOptions?: { label: string, value: string, type: string | undefined, isNumber?: boolean }[]
  renderChild: (control: SchemaNode, key?: any) => void
  changeRange: (value: number, index: number) => void
  changeField: (value: string, index: number) => void
  changeNot: (value: boolean, index: number) => void
  deleteFilter: (index: number) => void
  rangeGenerator: (val: any) => void
  filterObj: { [key: string]: any }
  env: RendererEnv;
  isShowInputItem: (item: any, type: any) => void
  notRange: string[]
  caseSensitive: boolean;
  onCheckbox: () => void;
  handleActionDisplay: (val: string) => void
  showAdvancedOption: boolean
  topN: number
  limitStatus: boolean
  changeTopN: (num: number) => void
  changeLimitStatus: (check: boolean) => void
  selectEmptyTime: (index: number) => void
  emptyTimeSelected?: boolean
  translate: TranslateFn<any>
}

type FiltersArr = {
  field: string, // 字段名
  condition: number, // 0：或   1：且
  not: boolean, // 不
  op: number, // 等于、大于...
  values?: string | number
}[]

type FiltersHeader = {
  label: string
  type: string
  name: string
  body?: []
}

const AdvancedModlePopup: React.FC<AdvancedProps> = (props) => {

  const { filtercont, filtersArr, filtersHeader, hideAdvancedFilter, handleOptionTransfer,
    renderChild, filter, handleActionDisplay, addFilter, onCheckbox, caseSensitive, showAdvancedOption,
    limitStatus, topN, changeTopN, changeLimitStatus } = props
  const limitInputRef = useRef<HTMLInputElement>(null);
  // const [optionTransfer, setOptionTransfer] = useState<JSX.Element>(handleOptionTransfer())
  const slot = {
    left: <div className='left-text' onClick={hideAdvancedFilter}>
      <Icon icon="title-left" style={{ width: '16px', height: '16px' }} />
    </div>,
    right: <div></div>
  };
  useEffect(() => {
    if (filter) {
      handleActionDisplay('0')
    } else
      handleActionDisplay('1')
    return
  }, [])

  return (
    <div className='advanced_drawer'>
      <Tabs
        centered
        tabBarExtraContent={slot}
        onTabClick={(key, e) => {
          handleActionDisplay(key)
        }}
      >
        {filter && filter?.body && <TabPane tab={'查询'} key={"0"} forceRender>
          <div className='advanced_drawer_filtersHeader'>
            {
              filter?.body?.map((item: any) => renderChild(item))
            }
          </div>
        </TabPane>}
        {(filtersArr?.length > 0) && <TabPane tab={'高级'} key={"1"} forceRender>
          <div className='advanced_drawer_filtersbody'>
            {filtersHeader?.length > 0 && <div className='advanced_drawer_filtersHeader'>
              {filtersHeader.map((item: any) =>
                renderChild(item))
              }
            </div>}
            <HandleAdvancedFilter {...props} />
          </div>
          <div className="advanced_drawer_List_button" onClick={addFilter}>
            <PlusOutlined />
            新增
          </div >
          <div className="advanced_drawer_List_button advanced_drawer_List_distinguish" onClick={() => { }}>
            <label onChange={onCheckbox} style={{ cursor: "pointer", marginRight: '16px' }}>
              <Checkbox checked={caseSensitive} />
              区分大小写
            </label>
            <div>
              <Checkbox onChange={(value: boolean) => {
                if (value) {
                  limitInputRef.current?.focus()
                }
                changeLimitStatus(value)
              }} checked={limitStatus}>仅查前</Checkbox>
              <InputNumber ref={limitInputRef} size='small' min={1} precision={0} onChange={(value) => changeTopN(value || 0)}
                style={{ margin: '0 8px', width: '100px' }} value={topN} />项
            </div>
          </div >
        </TabPane>}
        {(filtersArr?.length > 0 && showAdvancedOption) && <TabPane tab={'选项'} key={"2"} forceRender>
          {handleOptionTransfer()}
        </TabPane>
        }
      </Tabs>
    </div>
  )
}

const HandleAdvancedFilter = (props: any): JSX.Element => {
  const { filtersArr, filterOptions, changeRange, changeNot, changeField, filterObj, deleteFilter, renderChild,
    env, isShowInputItem, rangeGenerator, notRange, emptyTimeSelected, selectEmptyTime, translate } = props
  const options = filterOptions.map((item: any) => ({ ...item, value: item.value.split('--')[0] }));
  let selectList: any[] = []
  options.forEach((item: any) => {
    if (!selectList.some((i: any) => i.value === item.value)) {
      selectList.push(item)
    }
  });
  return <>
    <List
      className='advanced_drawer_List'
      bordered
      dataSource={filtersArr}
      renderItem={(item: any, _index) => {
        const content = rangeGenerator(item)
        const label = filterOptions.filter((items: any) => items.value == item.field)?.[0].label
        const dateOptions = selectList.filter(filItem => filItem.type && ['input-date', 'input-datetime', 'input-time', 'input-month', 'input-quarter', 'input-year'].includes(filItem.type))
        if (dateOptions.length) {
          dateOptions.unshift({
            label: translate('Select.emptyItem'),
            value: 'advancedFilter.noneData'
          })
        }
        return (
          <List.Item actions={[
            !item.dateLine && <span onClick={() => { filtersArr.length !== 1 && deleteFilter(_index) }}>
              <DeleteOutlined />
            </span>
          ]}>
            {item.dateLine && emptyTimeSelected ? <AdvancedFilterAction
              handleOnClick={(value: any) => {
                changeRange(filterObj[value.value].type === 'lion-upload' ? 10 : ['input-date', 'input-month', 'input-datetime'].includes(filterObj[value.value]?.type) ? 7 : 2, _index)
                changeField(value.value, _index);
              }}
              Options={dateOptions}
              item={item}
              emptyTimeSelected
              env={env}
              dete={true}
              allList={dateOptions}
              filtersArr={filtersArr} />
              : <AdvancedFilterAction
                handleOnClick={(value: any) => {
                  if (value.value === 'advancedFilter.noneData') {
                    selectEmptyTime?.(_index)
                  } else {
                    changeRange(filterObj[value.value].type === 'lion-upload' ? 10 : ['input-date', 'input-month', 'input-datetime'].includes(filterObj[value.value]?.type) ? 7 : 2, _index)
                    changeField(value.value, _index);
                  }
                }}
                Options={item.dateLine ? dateOptions : selectList}
                item={item}
                env={env}
                dete={true}
                allList={filterOptions}
                filtersArr={filtersArr} />}
            <AdvancedFilterAction
              handleOnClick={(value: any) => {
                changeRange(value.value, _index)
                changeNot(!!value?.not, _index)
              }}
              disabled={(item.dateLine && emptyTimeSelected) || notRange.includes(filterObj[item.field].type)}
              Options={content}
              item={item}
              env={env}
              dete={false} />
            {item.op == 12 && renderChild({ ...filterObj[item.field]?.dataTag, name: item.field }, 'dataTag')}
            {isShowInputItem(item, filterObj[item.field].type) &&
              <div className={`advanced_drawer_List_double ${['radios', 'checkboxes'].includes(filterObj[item.field].type) ? 'advanced_drawer_List_radios' : ''}`} >
                {item.op === 7 && (filterObj[item.field].type === 'input-number' || filterObj[item.field]?.isNumber)
                  ?
                  <>
                    {renderChild({ ...filterObj[item.field], isMultipleValues: false, name: filterObj[item.field].name + '-a8', label: undefined, domicile: { label: label } }, 'a')}

                    {renderChild({ ...filterObj[item.field], isMultipleValues: false, name: filterObj[item.field].name + '-b8', label: undefined, domicile: { label: label } }, 'b')}
                  </>
                  :
                  item.op === 7 && (filterObj[item.field].type === 'input-datetime' || filterObj[item.field].type === 'input-date')
                    ?
                    renderChild({ ...filterObj[item.field], type: filterObj[item.field].type + "-range", label: undefined, domicile: { label: label } }, undefined)
                    :
                    renderChild({
                      ...filterObj[item.field], label: undefined, domicile: { label: label }, isNumber: filterObj[item.field]?.isNumber,
                      value: filterObj?.[item.field]?.value?.includes(',') && ['input-date', 'input-datetime', 'input-time'].includes(filterObj[item.field]?.type) ? filterObj[item.field].value.split(',')[0] : filterObj[item.field].value,
                      disabled: item.dateLine && emptyTimeSelected
                    }, undefined)
                }
              </div>}
          </List.Item>
        )
      }}
    />
  </>
}

const AdvancedFilterAction = (props: any): JSX.Element => {
  const { handleOnClick, Options, item, dete, env, filtersArr, disabled, allList, emptyTimeSelected } = props
  const [moreIsOpened, setMoreIsOpened] = useState(false)
  const [value, setValue] = useState<any>()
  return <ActionSheet
    className='advanced_drawer_List_Action'
    isOpened={moreIsOpened}
    round
    container={env.getModalContainer}
    onHide={(e: any) => {
      e.stopPropagation();
      setMoreIsOpened(false)
      setValue(undefined)
    }}
    popupContent={
      <div className='advanced_drawer_List_popup'>
        <div className='advanced_drawer_List_popup_title'>
          <Button
            type="link"
            onClick={() => {
              setMoreIsOpened(false)
              setValue(undefined)
            }} >
            取消
          </Button>
          <Button
            type={value ? 'link' : 'text'}
            disabled={value ? false : true}
            onClick={(e) => {
              e.preventDefault()
              handleOnClick(value)
              setValue(undefined)
              setMoreIsOpened(false);
            }} >
            确定
          </Button>
        </div>
        <div className='advanced_drawer_List_popup_body'>
          {
            Options.map((_item: any, index: number) =>
              <div
                className={`advanced_drawer_List_popup_filter ${_item.label == value?.label ? 'advanced_drawer_List_popup_filter_text' : ''}`}
                onClick={() => setValue(_item)}
                key={index}>
                {_item.label}
              </div>)
          }
        </div>
      </div>
    }
  >
    <span
      onClick={() => { if (!disabled) setMoreIsOpened(true) }}
      className={`advanced_drawer_List_popup_text ${disabled ? 'advanced_drawer_disabled' : ''}`}
    >
      {
        (dete ? allList.filter((_item: any) => emptyTimeSelected ? _item.value == 'advancedFilter.noneData' : item.field == _item.value) :
          Options.filter((_item: any) => item.not ? (_item.value == item.op && _item.not) :
            (_item.value == item.op)
          ))?.[0]?.label
      }
    </span>
  </ActionSheet>
}

export default AdvancedModlePopup