import KFIcon from '@/components/KFIcon';
import ResourceSelectorModal, {
  ResourceSelectorResponse,
  ResourceSelectorType,
  selectorTypeConfig,
} from '@/pages/Pipeline/components/ResourceSelectorModal';
import { openAntdModal } from '@/utils/modal';
import { Button } from 'antd';
import { useState } from 'react';
import ParameterInput, { type ParameterInputProps } from '../ParameterInput';
import './index.less';

export { requiredValidator, type ParameterInputObject } from '../ParameterInput';

type ResourceSelectProps = {
  type: ResourceSelectorType;
} & ParameterInputProps;

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

function ResourceSelect({ type, value, onChange, ...rest }: ResourceSelectProps) {
  const [selectedResource, setSelectedResource] = useState<ResourceSelectorResponse | undefined>(
    undefined,
  );

  const selectResource = () => {
    const resource = selectedResource;
    const { close } = openAntdModal(ResourceSelectorModal, {
      type,
      defaultExpandedKeys: resource ? [resource.id] : [],
      defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [],
      defaultActiveTab: resource?.activeTab,
      onOk: (res) => {
        setSelectedResource(res);
        if (res) {
          const { activeTab, id, name, version, path } = res;
          if (type === ResourceSelectorType.Mirror) {
            onChange?.({
              value: path,
              showValue: path,
              fromSelect: true,
              activeTab,
              expandedKeys: [`${id}`],
              checkedKeys: [`${id}-${version}`],
            });
          } else {
            const jsonObj = {
              id,
              version,
              path,
            };
            const jsonObjStr = JSON.stringify(jsonObj);
            const showValue = `${name}:${version}`;
            onChange?.({
              value: jsonObjStr,
              showValue,
              fromSelect: true,
              activeTab,
              expandedKeys: [`${id}`],
              checkedKeys: [`${id}-${version}`],
              ...jsonObj,
            });
          }
        } else {
          onChange?.({
            value: undefined,
            showValue: undefined,
            fromSelect: false,
            activeTab: undefined,
            expandedKeys: [],
            checkedKeys: [],
          });
        }
        close();
      },
    });
  };

  return (
    <div className="kf-resource-select">
      <ParameterInput
        {...rest}
        value={value}
        onChange={onChange}
        onRemove={() => setSelectedResource(undefined)}
        onClick={selectResource}
      ></ParameterInput>
      <Button
        className="kf-resource-select__button"
        size="large"
        type="link"
        icon={getSelectBtnIcon(type)}
        onClick={selectResource}
      >
        {selectorTypeConfig[type].buttontTitle}
      </Button>
    </div>
  );
}

export default ResourceSelect;
