/* eslint-disable react/destructuring-assignment */
import * as React from 'react';
import { useEffect } from 'react';
import { FastSelect } from 'components/ui';
import { Component } from 'components/types';
import useOptions from '../hooks/useOptions';
import {
  FormTypes,
  // ControlledItem,
} from '../../types';

function Select(props: FormTypes.FormItem.FormAtomicSelectProps) {
  /**
   * key 表单唯一标识
   *
   * values 表单数据快照
   *
   * url 获取options接口线上地址
   *
   * local.url 获取options接口本地地址
   *
   * method 请求method
   *
   * contentType 请求contentType
   *
   * responseKey 列表数据字段
   *
   * placeholder
   *
   * notModify 是否不可修改
   *
   * searchable 是否支持搜索
   *
   * notAll 是否包含全部
   *
   * notInit 是否初始化数据
   *
   * isNeedLocationSearch 是否需要携带url上的参数
   *
   * fixedParameter 固定参数
   *
   * accept
   *
   * urlParams
   */
  const {
    config,
    values,
    validateTrigger,
  } = props;

  const {
    key,
    type,
    style,
    placeholder,
    notModify,
    searchable = false,
    clearable = false,
    notAll,
    dataAllValue = "",
    dataAllText = "全部",
    data: defaultOptions,
    defaultIndex,
    interact,
  } = config;
  let localOptions: FormTypes.FormItem.OptionItem[] = [];

  const OPTION_ITEM_ALL = { label: dataAllText, value: dataAllValue };

  if (!notAll) localOptions = [OPTION_ITEM_ALL];
  if (defaultOptions) localOptions = [...localOptions, ...defaultOptions];

  // states
  const { ajaxOptions, setOptions } = useOptions(props);

  // handlers
  const handleSearch = (value: string) => {
    if (searchable) {
      setOptions({ [key]: value });
    }
  };

  const handleChange = (vals: any[]) => {
    if (values[key].length === 1 && values[key][0] === dataAllValue) {
      const newVals = vals.filter((val: any) => val !== dataAllValue);
      props[validateTrigger](newVals);
    } else if (
      !values[key].includes(dataAllValue) &&
      vals.includes(dataAllValue)
    ) {
      props[validateTrigger]([dataAllValue]);
    } else if (
      vals.length === [...(defaultOptions || []), ...ajaxOptions].length &&
      !vals.includes(dataAllValue) &&
      !notAll
    ) {
      props[validateTrigger]([dataAllValue]);
    } else {
      props[validateTrigger](vals);
    }
  };

  // effects
  const deps =
    interact && interact.type === Component.Business.ResultType.fetch
      ? [values[interact.triggerKey as string]]
      : [];

  useEffect(
    () => {
      const params = {};
      if (
        interact &&
        interact.type === Component.Business.ResultType.fetch &&
        interact.triggerKey
      ) {
        params[interact.triggerKey as string] = values[interact.triggerKey as string];
      }
      setOptions(params).then((data) => {
        if (defaultIndex !== undefined) {
          props[validateTrigger](data[defaultIndex].value);
        }
      });
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [...deps]
  );

  return type === "multselect" ? (
    <FastSelect
      defaultValue={values[key] || []}
      style={{ ...style, minWidth: "100px" }}
      mode="multiple"
      placeholder={placeholder}
      options={[...localOptions, ...ajaxOptions]}
      onSearch={handleSearch}
      showSearch
      disabled={notModify}
      // eslint-disable-next-line react/destructuring-assignment
      onChange={handleChange}
      value={values[key] || []}
    />
  ) : (
    <FastSelect
      style={{ ...style, minWidth: "100px" }}
      defaultValue={values[key]}
      placeholder={placeholder}
      options={[...localOptions, ...ajaxOptions]}
      onSearch={handleSearch}
      showSearch
      allowClear={clearable}
      disabled={notModify}
      // eslint-disable-next-line react/destructuring-assignment
      onChange={props[validateTrigger]}
      value={values[key]}
    />
  );
}

export default Select;