import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, InputNumber, List, Tabs } from 'antd';
import React, { useCallback, useEffect, useMemo, 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 InputBox from '../InputBox';
import ActionSheet from './ActionSheet';
import { isMobile } from '../../utils/helper';

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="right-arrow-bold" className="icon" />
    </div>,
    right: <div></div>
  };
  const filtersRef = useRef<HTMLDivElement>(null)
  // 配置查询表单
  const [queryStatus, setQueryStatus] = useState({
    filterParam: false,
    advancedParam: false,
  })
  useEffect(() => {
    if (filter) {
      handleActionDisplay('0')
    } else
      handleActionDisplay('1')
    return
  }, []);
  useEffect(() =>{
    handleInitQueryStatus();
  }, [filter, filtersHeader]);
  // 生成label，必填的带*
  const genLabel = (label: string, type: string) => {
    return <span>{queryStatus[type] ? <span style={{color: 'red'}}>*</span> : null} {label}</span>
  };
  // 初始化查询/高级查询必填逻辑
  const handleInitQueryStatus = () => {
    const { body = [] } = filter ?? {};
    
    const filterParamIsRequired = body?.some((item: any) => item?.required);
    const advancedParamIsRequired = filtersHeader?.some((item: any) => item?.required);
    setQueryStatus({
      filterParam: filterParamIsRequired,
      advancedParam: advancedParamIsRequired,
    });
  }
  return (
    <div className='advanced_drawer'>
      <Tabs
        centered
        tabBarExtraContent={slot}
        onTabClick={(key, e) => {
          handleActionDisplay(key)
        }}
      >
        {filter && filter?.body && <TabPane tab={genLabel('查询', 'filterParam')} key={"0"} forceRender>
          <div className='advanced_drawer_filtersHeader'>
            {
              filter?.body?.map((item: any) => renderChild(item))
            }
          </div>
        </TabPane>}
        {(filtersArr?.length > 0) && <TabPane tab={genLabel('高级', 'advancedParam')} key={"1"} forceRender>
          <div ref={filtersRef} 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 add-button" onClick={() => {
            addFilter()
            if (filtersRef.current) {
              setTimeout(() => {
                // filtersRef.current?.scrollBy({ top: filtersRef.current.scrollHeight, behavior: 'smooth' })
                filtersRef.current!.scrollTop = filtersRef.current!.scrollHeight
              }, 120);
            }
          }}>
            <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, filtersHeader } = 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 <>
    {
      filtersHeader?.length ? (
        <div className='advanced_param_title-box'>
          <div className='title'>条件查询</div>
        </div>
      ) : null
    }
    <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}
              actionClassName={'advanced-condition'}
              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)
                  ?
                   (isMobile() ? <div>
                    {renderChild({ ...filterObj[item.field], isMultipleValues: false, name: filterObj[item.field].name + '-a8', label: undefined, domicile: { label: label } }, 'a', {placeholder: item.op === 7 ? '不限制' : undefined})}

                    {renderChild({ ...filterObj[item.field], isMultipleValues: false, name: filterObj[item.field].name + '-b8', label: undefined, domicile: { label: label } }, 'b', {placeholder: item.op === 7 ? '不限制' : undefined})}
                  </div> : <>
                    {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> : <div className='advanced_drawer_List_double '></div>}
          </List.Item>
        )
      }}
    />
  </>
}

const AdvancedFilterAction = (props: any): JSX.Element => {
  const { handleOnClick, Options, item, dete, env, disabled, allList, emptyTimeSelected, actionClassName } = props
  const [moreIsOpened, setMoreIsOpened] = useState(false)

  const ref = useRef<HTMLDivElement>(null)
  const [value, setValue] = useState('')

  const [options, setOptions] = useState(Options)

  useEffect(() => {
    if (moreIsOpened) {
      const element = ref.current?.querySelector(`[data-id="${item.field}"]`)
      if (element) {
        element.scrollIntoView()
      }
    }
  }, [moreIsOpened])

  useEffect(() => {
    if (value == '') {
      setOptions(Options)
    } else {
      setOptions(Options.filter((item: any) => item.label.includes(value)))
    }
  }, [value, Options])

  return <ActionSheet
    className='advanced_drawer_List_Action'
    isOpened={moreIsOpened}
    actionClassName={actionClassName}
    round
    container={env.getModalContainer}
    onHide={(e: any) => {
      e.stopPropagation();
      setMoreIsOpened(false)
    }}
    popupContent={
      <div className='advanced_drawer_List_popup' ref={ref}>
        <div className='advanced_drawer_List_popup_title'>
          <label>{`选择${dete ? '字段' : '条件'}`}</label>
          <span className={`closeWrap-icon`}>
            <Icon icon="close" onClick={() => setMoreIsOpened(false)}/>
          </span>
        </div>
        <div className='advanced_drawer_List_popup_search'>
          <InputBox
            value={value}
            className='input-box'
            onChange={setValue}
            placeholder={'请输入关键字'}
            clearable={false}
          >
            {value !== '' ? (
              <a onClick={() => { setValue('') }}>
                <Icon icon="close" className="icon" />
              </a>
            ) : (
              <Icon icon="search" className="icon" />
            )}
          </InputBox>
        </div>
        <div className='advanced_drawer_List_popup_body'>
          {
            options.map((_item: any, index: number) =>
              <div
                className={`advanced_drawer_List_popup_filter ${_item.value == item.field ? 'advanced_drawer_List_popup_filter_text' : ''}`}
                data-id={String(_item.value) + (_item.not ?? '')}
                onClick={() =>  {
                  handleOnClick(_item)
                  setMoreIsOpened(false)
                }}
                key={index}>
                {_item.label}
              </div>)
          }
        </div>
      </div>
    }
  >
    <span
      onClick={() => { if (!disabled) setMoreIsOpened(true) }}
      className={`advanced_drawer_List_popup_text ${dete ? 'align_left' : ''} ${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