import { View } from 'react-native';
import Select from '../Select';
import { SelectProps, Option } from '../Select/interface';
import FilterTag, { FilterTagProps } from './FilterTag';
import React, { useEffect, useMemo, useState } from 'react';
import { isNil } from 'lodash';

export type FilterSelectProps = FilterTagProps & {
  options: SelectProps['options'];
  multiple?: boolean;
  selectProps?: Omit<SelectProps, 'type' | 'visible' | 'options'> & {
    visible?: boolean;
    options?: SelectProps['options'];
  };
};

const FilterSelect = (props: FilterSelectProps) => {
  const { value, text, options, multiple, selectProps, ...tagProps } = props;
  const [visible, setVisible] = useState(false);
  const [tagTitle, setTagTitle] = useState(text);
  const [tagValue, setTagValue] = useState<any>(value);
  const [selectValue, setSelectValue] = useState<string | string[] | null>();

  // 缓存value、label映射
  const valueLabelMap = useMemo(() => {
    const source = options || selectProps?.options;
    const map = new Map<string, Option['label']>();

    (source || []).forEach((item) => {
      if ('children' in item) {
        item.children.forEach((child) => {
          map.set(child.value, child.label);
        });
      } else {
        map.set(item.value, item.label);
      }
    });
    return map;
  }, [options, selectProps?.options]);

  const handleSelectChange = (value: string | string[]) => {
    setSelectValue(value);
    if (multiple) {
      selectProps?.onChange?.(value);
      return;
    }
    setVisible(false);
    setTagValue(value);
    // 单选更新标题为选中项的 label；多选保留原始标题，由 FilterTag 负责展示数量
    if (typeof value === 'string') {
      const label = valueLabelMap.get(value);
      if (label) setTagTitle(label);
    }
    // 取消选项时，需要还原标题
    if (isNil(value)) {
      setTagTitle(text);
    }
    selectProps?.onChange?.(value);
  };

  useEffect(() => {
    setSelectValue(value);
    setTagValue(value);
    if (typeof value === 'string') {
      const label = valueLabelMap.get(value);
      if (label) setTagTitle(label);
    }
  }, [value]);

  // 多选确认
  const handleSelectConfirm = (
    value: string | string[],
    searchStr?: string
  ) => {
    setVisible(false);
    setTagValue(value);
    selectProps?.onConfirm?.(value, searchStr);
  };

  const onTagClear = () => {
    setTagValue(null);
    setSelectValue(null);
    setTagTitle(props.text);
    tagProps.onClear?.();
  };

  return (
    <View>
      <FilterTag
        appearance="filter"
        value={tagValue}
        active={visible}
        text={tagTitle}
        {...tagProps}
        onPress={() => {
          setVisible(true);
          tagProps.onPress?.();
        }}
        onClear={onTagClear}
      />
      <Select
        value={selectValue || ''}
        type={multiple ? Select.Type.checkbox : Select.Type.radio}
        visible={visible}
        onPressOverlay={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        onRequestClose={() => {
          setVisible(false);
          return true;
        }}
        {...selectProps}
        options={options || selectProps?.options}
        onChange={handleSelectChange}
        onConfirm={handleSelectConfirm}
      />
    </View>
  );
};

export default FilterSelect;