/*
 * @Author: 赵伟
 * @Date: 2024-04-11 16:31:18
 * @Description: 选择代码
 */

import KFIcon from '@/components/KFIcon';
import KFModal from '@/components/KFModal';
import { type CodeConfigData } from '@/pages/CodeConfig/List';
import { getCodeConfigListReq } from '@/services/codeConfig';
import { to } from '@/utils/promise';
import type { ModalProps, PaginationProps } from 'antd';
import { Empty, Input, Pagination } from 'antd';
import { useEffect, useState } from 'react';
import CodeConfigItem from '../CodeConfigItem';
import './index.less';

export { type CodeConfigData };

export interface CodeSelectorModalProps extends Omit<ModalProps, 'onOk'> {
  onOk?: (params: CodeConfigData | undefined) => void;
}

/** 选择代码配置的弹窗，推荐使用函数的方式打开 */
function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
  const [dataList, setDataList] = useState<CodeConfigData[]>([]);
  const [total, setTotal] = useState(0);
  const [pagination, setPagination] = useState<PaginationProps>({
    current: 1,
    pageSize: 20,
  });
  const [searchText, setSearchText] = useState<string | undefined>(undefined);
  const [inputText, setInputText] = useState<string | undefined>(undefined);

  useEffect(() => {
    // 获取数据请求
    const getDataList = async () => {
      const params = {
        page: pagination.current! - 1,
        size: pagination.pageSize,
        code_repo_name: searchText || undefined,
      };
      const [res] = await to(getCodeConfigListReq(params));
      if (res && res.data && res.data.content) {
        setDataList(res.data.content);
        setTotal(res.data.totalElements);
      }
    };

    getDataList();
  }, [pagination, searchText]);

  // 搜索
  const handleSearch = (value: string) => {
    setSearchText(value);
    setPagination((prev) => ({
      ...prev,
      current: 1,
    }));
  };

  const handleClick = (item: CodeConfigData) => {
    onOk?.(item);
  };

  // 分页切换
  const handlePageChange: PaginationProps['onChange'] = (page, pageSize) => {
    setPagination({
      current: page,
      pageSize: pageSize,
    });
  };

  return (
    <KFModal
      {...rest}
      title="选择代码配置"
      image={require('@/assets/img/modal-code-config.png')}
      width={920}
      footer={null}
      destroyOnClose
    >
      <div className="kf-code-selector-modal">
        <Input.Search
          className="kf-code-selector-modal__search"
          placeholder="按代码仓库名称筛选"
          allowClear
          onSearch={handleSearch}
          size="large"
          onChange={(e) => setInputText(e.target.value)}
          suffix={null}
          value={inputText}
          prefix={
            <KFIcon type="icon-sousuo" color="rgba(22,100,255,0.4" style={{ marginLeft: '10px' }} />
          }
          // prefix={
          //   <Icon icon="local:magnifying-glass" style={{ marginLeft: '10px', marginTop: '2px' }} />
          // }
        />
        {dataList?.length !== 0 ? (
          <>
            <div className="kf-code-selector-modal__content">
              {dataList?.map((item) => (
                <CodeConfigItem item={item} key={item.id} onClick={handleClick} />
              ))}
            </div>
            <Pagination
              align="center"
              total={total}
              showSizeChanger
              defaultPageSize={20}
              pageSizeOptions={[20, 40, 60, 80, 100]}
              showQuickJumper
              onChange={handlePageChange}
              {...pagination}
            />
          </>
        ) : (
          <div className="kf-code-selector-modal__empty">
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
          </div>
        )}
      </div>
    </KFModal>
  );
}

export default CodeSelectorModal;
