import {
  Download,
  FileAdditionOne,
  FileExcel,
  Refresh,
  Upload,
} from '@icon-park/react';
import {ChildrenFC, MENU_STORAGE} from '@utils';
import {Button, Space, Upload as AntUpload, UploadProps} from 'antd';
import css from './index.module.css';
import {useLocation} from 'react-router-dom';
import {useMemo} from 'react';
import {useSessionStorageState} from 'ahooks';
import {TreeRoleMenuData} from '@models';
import {useSaveSetting} from './hooks';
import {
  createPageContext,
  createSearchContext,
  useContextSection,
} from '@hooks';

type Props = {
  onAdd?: () => void;
  onExport?: () => void;
  isExporting?: boolean;
  title?: string;
  onDownload?: () => void;
  uploadProps?: UploadProps;
  isUploading?: boolean;
  preloadKey?: string;
  searchContext: ReturnType<typeof createSearchContext>;
  pageContext: ReturnType<typeof createPageContext>;
};

const TableTools: ChildrenFC<Props> = function ({
  children,
  onAdd,
  onExport,
  isExporting,
  title,
  onDownload,
  uploadProps,
  isUploading,
  preloadKey,
  searchContext,
  pageContext,
}) {
  const [pages] = useSessionStorageState<TreeRoleMenuData[]>(MENU_STORAGE);
  const {pathname} = useLocation();
  const menuTitle = useMemo(
    function () {
      return pages.find(val => val.url === pathname)?.name ?? '';
    },
    [pages, pathname],
  );
  const [isSaveing, onSaveClick] = useSaveSetting(
    searchContext,
    pageContext,
    preloadKey,
  );
  const {isRefreshing, onRefresh} = useContextSection(
    searchContext,
    ([state]) => ({
      isRefreshing: state.isSearching,
      onRefresh: state.refetch,
    }),
  );

  return (
    <section className='table-tool'>
      <h1 className={css.title}>{title ?? menuTitle}</h1>
      <Space>
        {onAdd && (
          <Button
            type='primary'
            onClick={onAdd}
            data-testid='add_btn'
            icon={<FileAdditionOne theme='outline' className='anticon' />}
          >
            新增
          </Button>
        )}
        {onRefresh && (
          <Button
            className='ant-btn-color-green'
            data-testid='refresh_btn'
            onClick={onRefresh}
            loading={isRefreshing}
            icon={<Refresh theme='outline' className='anticon' />}
          >
            刷新
          </Button>
        )}
        {onDownload && (
          <Button
            onClick={onDownload}
            icon={<Download theme='outline' className='anticon' />}
          >
            模板下载
          </Button>
        )}
        {uploadProps && (
          <AntUpload {...uploadProps}>
            <Button
              loading={isUploading}
              icon={<Upload theme='outline' className='anticon' />}
            >
              模板上传
            </Button>
          </AntUpload>
        )}
        {onExport && (
          <Button
            data-testid='export_btn'
            onClick={onExport}
            loading={isExporting}
            icon={<FileExcel theme='outline' className='anticon' />}
          >
            导出
          </Button>
        )}
        {children}
        <Button
          data-testid='save_setting_btn'
          loading={isSaveing}
          onClick={onSaveClick}
        >
          保存配置
        </Button>
      </Space>
    </section>
  );
};

export default TableTools;
