/**
 * @author 挽枫
 * @description 终端交互、我的可视化搜索头部封装、封装的不好不要吐槽、EasyV4.17版本需求
 *
 */
import { Input, ConfigProvider } from '@easyv/react-gui';
import React from 'react';
import { Link } from 'react-router-dom';
import SortOption from 'containers/screen-list/components/SortOption';
import styles from './style.less';
import { useProductionInfo } from 'components/easyUse';
import { useAuth } from 'components/easyUse';
import { modules } from 'constants/authority';

const { Search } = Input;

export interface EasyvAppHeaderProps {
  filterScreenLength?: number; // 搜索后应用的数量
  isMultiExport?: boolean; //是否是批量操作
  search?: string; //搜索的内容
  currentGroupName?: string; //当前分组的名字
  currentAllScreenLength?: number; // 当前分组大屏数量
  isNoTrashedScreen: boolean; //是否为非回收站的可视化应用
  placeholder?: string; //搜索框提示
  style?: React.CSSProperties;
  onSearchChange: (e) => void; //搜索框发生变化
  onSelectSortTypeChange: (v: 'byCreatedAt' | 'byUpdatedAt') => void; //排序类型发生变化
}

const EasyvSearchHeader = (props: EasyvAppHeaderProps) => {
  const {
    filterScreenLength,
    search,
    isMultiExport,
    currentGroupName,
    onSearchChange,
    onSelectSortTypeChange,
    currentAllScreenLength,
    isNoTrashedScreen,
    placeholder = '搜索',
    style
  } = props;
  const productionInfo = useProductionInfo();
  const { isAdmin = false } = productionInfo;
  const { checkAuth } = useAuth();

  return (
    <ConfigProvider>
      {!isMultiExport && (
        <div className={styles.search_wrapper} style={style}>
          <div className={styles.app_num}>
            <div className={styles.app_num_left}>
              {search ? (
                <>
                  搜索
                  <span className={styles.searchText} title={search}>{`"${search}"`}</span>
                  <span>{filterScreenLength}个结果</span>
                </>
              ) : (
                <>
                  <span className={styles.screenNametext} title={currentGroupName}>
                    {currentGroupName}
                  </span>
                  <span style={{ color: search ? 'rgb(51, 126, 254)' : '#fff' }}>&thinsp;&thinsp;&thinsp;{currentAllScreenLength}</span>
                  <span>个</span>
                </>
              )}
            </div>
            {checkAuth(modules.space) && !search && isNoTrashedScreen && isAdmin && (
              <>
                <div className={styles.app_num_rect}></div>
                <div className={styles.app_num_right}>
                  <Link className={styles.link} target="_blank" to="/space">
                    管理应用配额
                  </Link>
                </div>
              </>
            )}
          </div>
          <div className={styles.search_wrapper_right}>
            <Search
              className={styles.search_input}
              placeholder={placeholder}
              value={search}
              onChange={onSearchChange}
              style={{ width: 226 }}
            />
            <SortOption onChange={onSelectSortTypeChange} />
          </div>
        </div>
      )}
    </ConfigProvider>
  );
};

export default EasyvSearchHeader;
