import React, { useEffect, useState, useImperativeHandle, useRef, useMemo } from 'react';

import { Tag, Button, Popover } from 'antd';
import { UserAddOutlined } from '@ant-design/icons';
import './style.less';
import type { UserItem } from './dialog';
import UserSelectorDialog from './dialog';
import { searchUserByAllType, SearchUserAllData } from './service';
import _ from 'lodash';

export type QxUserSelectorProps = {
  cRef?: any;
  onChange?: (data: string | string[], users?: UserItem[]) => void;
  onMounted?: () => void;
  defaultValue?: any;
  disabled?: boolean;
  multiple?: boolean;
  max?: number;
  readOnly?: boolean;
  value?: string | string[];
  defaultData?: UserItem | UserItem[];
  params?: any; //请求body参数
  request: any;
};

type BaseUser = {
  id: string;
  name: string;
};

/**
 * 选人组件
 * @param props
 * @constructor
 */
const QxUserSelector: React.FC<QxUserSelectorProps> = (props) => {
  //弹框是否可见
  const [visible, setVisible] = useState(false);
  const [popVisible, setPopVisible] = useState(false);
  const [popWidth, setPopWidth] = useState(100);
  //常用联系人
  const [favorites, setFavorites] = useState([]);
  //模糊搜索到的人
  const [userList, setUserList] = useState(null);
  //已选择的人员信息
  const [selectUsers, setSelectUsers] = useState<BaseUser[]>([]);
  //存储人员信息，减少重复请求 {[id]:BaseUser}
  const [selectTmpUsersMap, setTmpUsersMap] = useState<Record<string, BaseUser>>({});

  const [value, setValue] = useState<string | string[]>();

  const qxUserSelectorInputRef = useRef<HTMLDivElement>();
  const inputRef = useRef<HTMLInputElement>();

  useEffect(() => {
    setValue(props.defaultValue);
    if (props?.onMounted) {
      props?.onMounted();
    }
  }, []);
  //console.log('QxUserSelector', props.value)

  useImperativeHandle(props.cRef, function () {
    return {
      // 暴露给父组件
      clear: () => {
        setSelectUsers([]);
        setValue(undefined);
      },
      /*//方法触发增加人
      addUsers: (users: BaseUser[]) => {
        const addIds: string[] = selectUsers.map(user => user.id);
        const waitUsers = users.filter((user) => {
          return user.id && !addIds.includes(user.id);
        });
        setSelectUsers([...selectUsers, ...waitUsers]);
      },*/
      //设置人员
      setUsers: (users: BaseUser[]) => {
        if (JSON.stringify(users) === JSON.stringify(selectUsers)) {
          return;
        }
        setSelectUsers(users);
        const ids = users.map((user) => user.id);
        if (JSON.stringify(ids) === JSON.stringify(value)) {
          return;
        }
        props.onChange(ids, users);
      },
    };
  });

  const userId = window.localStorage.getItem('userId');
  const handleFavorites = (data?: UserItem[]) => {
    //如果限制了选择范围，则不能选择常用联系人
    if (props?.params?.range) {
      return;
    }

    if (!userId) {
      return;
    }

    const userName = window.localStorage.getItem('userName');
    const cropCode = window.localStorage.getItem('corpCode');
    const favoritesStorage = window.localStorage.getItem(`${cropCode}_${userId}_favorites`);
    let _favoritesData = [];
    let ids = [];
    if (favoritesStorage) {
      _favoritesData = JSON.parse(favoritesStorage);
      ids = _favoritesData.map((item) => item?.data?.id);
    }
    if (data) {
      data.forEach((item) => {
        const index = ids.indexOf(item.id);
        if (index > -1) {
          const favoritesDatum = _favoritesData[index];
          favoritesDatum.count += 1;
          favoritesDatum.data = item;
          _favoritesData.splice(index, 1);
          _favoritesData.unshift(favoritesDatum);
        } else {
          _favoritesData.unshift({ count: 1, data: item });
        }
      });
    }

    if (_favoritesData.length === 0 && userId) {
      _favoritesData[0] = {
        count: 1,
        data: { id: userId, name: userName || '我自己' },
      };
    }
    if (_favoritesData.length > 0) {
      // _favoritesData.sort((a, b) => b.count - a.count);
      _favoritesData = _favoritesData.splice(0, 5);
    }

    window.localStorage.setItem(`${cropCode}_${userId}_favorites`, JSON.stringify(_favoritesData));
    setFavorites(_favoritesData.map((item) => item.data).filter((o) => o.name !== '系统管理员')); //  如果有重名过滤怎么办 TODO
  };

  //TODO 默认值待优化
  useEffect(() => {
    let _users: BaseUser[] = [];
    const _maps = {};
    let ids: string[];
    if (props.defaultData) {
      if (props.multiple && Array.isArray(props.defaultData)) {
        _users = props.defaultData;
        ids = [];
        props.defaultData.map((item: BaseUser) => {
          ids.push(item.id);
          _maps[item.id] = item;
        });
      } else if (Array.isArray(props.defaultData)) {
        _users = props.defaultData;
        ids = [];
        props.defaultData.map((item: BaseUser) => {
          ids.push(item.id);
          _maps[item.id] = item;
        });
      } else {
        // @ts-ignore
        _users = [props.defaultData];
        // @ts-ignore
        ids = props.defaultData.id;
      }
    }
    setSelectUsers(_users);
    setTmpUsersMap(_maps);
    if (ids && ids.length > 0 && !props.value && props.onChange) {
      props.onChange(ids, _users);
    }

    handleFavorites();
  }, [JSON.stringify(props.defaultData)]);

  useEffect(() => {
    setValue(props.value);
    if (!props.value) {
      setSelectUsers([]);
    }
  }, [props.value]);

  // getUserList()
  const handleOk = (keys: string[], data: UserItem[]) => {
    let _value: string[] | string = keys;
    if (!props.multiple && keys && keys.length > 0) {
      _value = keys[0];
    }
    setValue(_value);
    setSelectUsers([...data]);
    setVisible(false);

    handleFavorites(data);

    if (props.onChange) {
      props.onChange(_value, data);
    }
  };

  const handleAdd = (user: UserItem) => {
    if ((value || []).indexOf(user?.id) > -1) {
      return;
    }
    let _value: string | string[] = '';
    let _selectUsers: UserItem[] = [];
    if (props.multiple) {
      if (props.max === 1) {
        _value = [user.id];
        _selectUsers = [user];
      } else {
        _value = value ? [...value, user.id] : [user.id];
        _selectUsers = [...selectUsers, user];
      }
    } else {
      _value = user.id;
      _selectUsers = [user];
    }
    setValue(_value);
    setSelectUsers(_selectUsers);

    handleFavorites([user]);

    if (props.onChange) {
      props.onChange(_value, _selectUsers);
    }
    //setPopVisible(false);

    //如果是单选，则直接关闭pop
    if (props.max === 1 || !props.multiple || typeof value === 'string') {
      setPopVisible(false);
    }
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleRemove = (index: number) => {
    let _value: string | string[] = '';
    let _selectUsers: UserItem[] = [];
    if (props.multiple && Array.isArray(value)) {
      _value = [...value];
      _selectUsers = [...selectUsers];
      _value.splice(index, 1);
      _selectUsers.splice(index, 1);
    }

    setValue(_value);
    setSelectUsers(_selectUsers);

    if (props.onChange) {
      props.onChange(_value, _selectUsers);
    }
  };

  useEffect(() => {
    if (popVisible && qxUserSelectorInputRef?.current) {
      setPopWidth(qxUserSelectorInputRef?.current?.clientWidth);
    }
    if (!popVisible && inputRef?.current) {
      inputRef.current.value = '';
      setUserList(null);
    }
  }, [popVisible]);

  const handleSearch = _.debounce((_keywords: string | undefined) => {
    if (!_keywords) {
      setUserList(null);
      return;
    }
    const __keywords: string = _keywords.trim();
    if (!__keywords) {
      setUserList(null);
      return;
    }

    const params: SearchUserAllData = { pageSize: 5, keywords: __keywords };
    if (props?.params?.range) {
      params.range = props?.params?.range;
    }
    searchUserByAllType(props.request, params).then((res) => {
      setUserList(res?.list || []);
    });
  }, 500);

  const userDropContent = useMemo(() => {
    return (
      <div className={'qx-user-selector--input__drop'} style={{ width: popWidth + 'px' }}>
        <dl className={'qx-user-selector-pop-list'}>
          {userList ? (
            userList.length == 0 ? (
              <dd className={'qx-user-selector-pop-empty'}>没有匹配到任何结果</dd>
            ) : (
              <>
                <dt>您可能想找</dt>
                {userList.map((item) => {
                  return (
                    <dd
                      key={item.id}
                      onClick={() => handleAdd(item)}
                      className={(value || []).indexOf(item.id) > -1 ? 'disabled' : null}
                    >
                      {item?.name}
                      {item?.code ? (
                        <span className={'qx-user-selector-code'}>（{item?.code}）</span>
                      ) : null}
                    </dd>
                  );
                })}
              </>
            )
          ) : null}
          {favorites?.length > 0 ? (
            <>
              <dt>最近联系人</dt>
              {favorites.map((item) => {
                return (
                  <dd
                    key={item.id}
                    onClick={() => handleAdd(item)}
                    className={`text_over ${
                      (value || []).indexOf(item.id) > -1 ? 'disabled' : null
                    }`}
                  >
                    {item?.name}
                    {item?.code ? (
                      <span className={'qx-user-selector-code'}>（{item?.code}）</span>
                    ) : null}
                  </dd>
                );
              })}
            </>
          ) : null}
          <a
            className={'qx-user-selector-more ant-typography'}
            style={{ paddingLeft: 10 }}
            onClick={() => {
              setPopVisible(false);
              setVisible(true);
            }}
          >
            加载更多
          </a>
        </dl>
      </div>
    );
  }, [popWidth, favorites, props?.params, userList, value]);

  const handleKeyDown = (e) => {
    const { which } = e;
    // Remove value by `backspace`
    if (which === 8 && e.target.value === '') {
      if (Array.isArray(value) && value.length > 0) {
        const _value: string[] = [...value];
        let _selectUsers: UserItem[] = [];

        _selectUsers = [...selectUsers];

        _value.pop();
        _selectUsers.pop();

        setValue(_value);
        setSelectUsers(_selectUsers);

        if (props.onChange) {
          props.onChange(_value, _selectUsers);
        }
      } else if (!Array.isArray(value) && value) {
        setValue([]);
        setSelectUsers([]);

        if (props.onChange) {
          props.onChange('');
        }
      }
    }
  };

  return (
    <>
      <Popover
        content={userDropContent}
        placement={'bottom'}
        visible={
          ((props?.params?.range || !userId) && !userList) || props.readOnly ? false : popVisible
        }
        trigger={'click'}
        overlayClassName={'qx-user-selector--input__pop'}
        onVisibleChange={(v: boolean) => setPopVisible(v)}
      >
        <div
          className={
            'qx-user-selector--input ant-input' +
            `${props.readOnly ? ' qx-user-selector--readonly' : ''}`
          }
          style={{ minHeight: '32px' }}
          ref={qxUserSelectorInputRef}
          onClick={() => setPopVisible(true)}
        >
          <div
            className={
              'qx-user-selector--div ' + `${props?.readOnly ? '' : 'qx-user-selector-overflow'}`
            }
          >
            {selectUsers.map((user: { name: string; id: string }, index: number) => {
              if (!user.name) {
                return null;
              }
              return (
                <Tag
                  color={'blue'}
                  closable={!props.readOnly}
                  key={user.id}
                  onClose={() => handleRemove(index)}
                  style={{
                    maxWidth: `calc(100%)`,
                    height: '22px',
                  }}
                >
                  <span
                    style={{
                      display: 'inline-block',
                      maxWidth: `calc(100% - ${!props.readOnly ? 15 : 0}px)`,
                      textOverflow: 'ellipsis',
                      overflow: 'hidden',
                      height: 20,
                      lineHeight: '20px',
                    }}
                    title={user.name}
                  >
                    {user.name}
                  </span>
                </Tag>
              );
            })}
            {props.readOnly ? null : (
              <div className="qx-select-selection-search">
                <input
                  ref={inputRef}
                  type="text"
                  disabled={props.readOnly || props.disabled}
                  className={'qx-user-input__box'}
                  placeholder={'搜索'}
                  onKeyDown={(e) => handleKeyDown(e)}
                  onChange={(e) => {
                    handleSearch(e.target?.value);
                  }}
                  onFocus={() => {
                    setPopVisible(true);
                  }}
                  onClick={(e) => {
                    e.stopPropagation();
                  }}
                  maxLength={20}
                />
                <Button
                  className={'qx-user-input__icon'}
                  size={'small'}
                  onClick={(e) => {
                    e.stopPropagation();
                    setPopVisible(false);
                    setVisible(true);
                  }}
                  type={'text'}
                  icon={<UserAddOutlined style={{ color: '#40A9FC' }} />}
                />
              </div>
            )}
          </div>
        </div>
      </Popover>
      {!props.readOnly ? (
        <UserSelectorDialog
          key={visible + ''}
          visible={visible}
          multiple={props.multiple}
          selectedData={selectUsers}
          params={props.params}
          request={props.request}
          onOk={handleOk}
          max={props.max}
          onCancel={handleCancel}
        />
      ) : null}
    </>
  );
};

export default QxUserSelector;