/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 数据集、模型、镜像选择表单组件
 */

import KFIcon from '@/components/KFIcon';
import ResourceSelectorModal, {
  type ResourceSelectorResponse,
  ResourceSelectorType,
  selectorTypeConfig,
} from '@/components/ResourceSelectorModal';
import { openAntdModal } from '@/utils/modal';
import { Button, ConfigProvider } from 'antd';
import classNames from 'classnames';
import { pick } from 'lodash';
import ParameterInput, { type ParameterInputProps } from '../ParameterInput';
import './index.less';

export {
  requiredValidator,
  type ParameterInputObject,
  type ParameterInputValue,
} from '../ParameterInput';
export { ResourceSelectorType, selectorTypeConfig, type ResourceSelectorResponse };

interface ResourceSelectProps extends ParameterInputProps {
  /** 类型，数据集、模型、镜像 */
  type: ResourceSelectorType;
}

// 获取选择数据集、模型、镜像后面按钮 icon
const getSelectBtnIcon = (type: ResourceSelectorType) => {
  return <KFIcon type={selectorTypeConfig[type].buttonIcon} font={16} />;
};

/** 数据集、模型、镜像选择表单组件 */
function ResourceSelect({
  type,
  value,
  size,
  disabled,
  className,
  style,
  onChange,
  ...rest
}: ResourceSelectProps) {
  const { componentSize } = ConfigProvider.useConfig();
  const mySize = size || componentSize;
  let selectedResource: ResourceSelectorResponse | undefined = undefined;
  if (
    value &&
    typeof value === 'object' &&
    value.activeTab &&
    value.id &&
    value.name &&
    value.version &&
    value.path &&
    (type === ResourceSelectorType.Mirror || (value.identifier && value.owner))
  ) {
    selectedResource = pick(value, [
      'activeTab',
      'id',
      'identifier',
      'name',
      'owner',
      'version',
      'path',
    ]) as ResourceSelectorResponse;
  }

  // 选择数据集、模型、镜像
  const selectResource = () => {
    const { close } = openAntdModal(ResourceSelectorModal, {
      type,
      defaultExpandedKeys: selectedResource ? [selectedResource.id] : [],
      defaultCheckedKeys: selectedResource
        ? [`${selectedResource.id}-${selectedResource.version}`]
        : [],
      defaultActiveTab: selectedResource?.activeTab,
      onOk: (res) => {
        if (res) {
          const { activeTab, id, name, version, path, identifier, owner } = res;
          if (type === ResourceSelectorType.Mirror) {
            onChange?.({
              value: path,
              showValue: path,
              fromSelect: true,
              activeTab,
              id,
              name,
              version,
              path,
            });
          } else {
            const jsonObj = {
              id,
              name,
              version,
              path,
              identifier,
              owner,
            };
            const jsonObjStr = JSON.stringify(jsonObj);
            const showValue = `${name}:${version}`;
            onChange?.({
              value: jsonObjStr,
              showValue,
              fromSelect: true,
              activeTab,
              ...jsonObj,
            });
          }
        } else {
          onChange?.(undefined);
        }
        close();
      },
    });
  };

  // 删除
  const handleRemove = () => {
    onChange?.(undefined);
  };

  return (
    <div className={classNames('kf-resource-select', className)} style={style}>
      <ParameterInput
        {...rest}
        disabled={disabled}
        value={value}
        size={mySize}
        onChange={onChange}
        onRemove={handleRemove}
        onClick={selectResource}
      ></ParameterInput>
      <Button
        className="kf-resource-select__button"
        size={mySize}
        type="link"
        icon={getSelectBtnIcon(type)}
        disabled={disabled}
        onClick={selectResource}
      >
        {selectorTypeConfig[type].buttontTitle}
      </Button>
    </div>
  );
}

export default ResourceSelect;
