import ResourceSelectorModal, { ResourceSelectorType } from '@/components/ResourceSelectorModal';
import { openAntdModal } from '@/utils/modal';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button } from 'antd';
import { http, HttpResponse } from 'msw';
import {
  datasetDetailData,
  datasetListData,
  datasetVersionData,
  mirrorListData,
  mirrorVerionData,
  modelDetailData,
  modelListData,
  modelVersionData,
} from './mockData';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/ResourceSelectorModal 资源选择对话框',
  component: ResourceSelectorModal,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
    msw: {
      handlers: [
        http.get('/api/mmp/newdataset/queryDatasets', () => {
          return HttpResponse.json(datasetListData);
        }),
        http.get('/api/mmp/newdataset/getVersionList', () => {
          return HttpResponse.json(datasetVersionData);
        }),
        http.get('/api/mmp/newdataset/getDatasetDetail', () => {
          return HttpResponse.json(datasetDetailData);
        }),
        http.get('/api/mmp/newmodel/queryModels', () => {
          return HttpResponse.json(modelListData);
        }),
        http.get('/api/mmp/newmodel/getVersionList', () => {
          return HttpResponse.json(modelVersionData);
        }),
        http.get('/api/mmp/newmodel/getModelDetail', () => {
          return HttpResponse.json(modelDetailData);
        }),
        http.get('/api/mmp/image', () => {
          return HttpResponse.json(mirrorListData);
        }),
        http.get('/api/mmp/imageVersion', () => {
          return HttpResponse.json(mirrorVerionData);
        }),
      ],
    },
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['!autodocs'],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    // backgroundColor: { control: 'color' },
    open: {
      description: '对话框是否可见',
    },
    type: {
      control: 'select',
      options: Object.values(ResourceSelectorType),
    },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: { onCancel: fn(), onOk: fn() },
} satisfies Meta<typeof ResourceSelectorModal>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
/** 选择数据集 */
export const Dataset: Story = {
  args: {
    type: ResourceSelectorType.Dataset,
  },
  render: function Render(args) {
    const handleClick = () => {
      const { close } = openAntdModal(ResourceSelectorModal, {
        type: args.type,
        onOk: (res) => {
          const { onOk } = args;
          onOk?.(res);
          close();
        },
      });
    };
    return (
      <Button type="primary" onClick={handleClick}>
        选择数据集
      </Button>
    );
  },
};

/** 选择模型 */
export const Model: Story = {
  args: {
    type: ResourceSelectorType.Model,
  },
  render: function Render(args) {
    const handleClick = () => {
      const { close } = openAntdModal(ResourceSelectorModal, {
        type: args.type,
        onOk: (res) => {
          const { onOk } = args;
          onOk?.(res);
          close();
        },
      });
    };
    return (
      <Button type="primary" onClick={handleClick}>
        选择模型
      </Button>
    );
  },
};

/** 选择镜像 */
export const Mirror: Story = {
  args: {
    type: ResourceSelectorType.Mirror,
  },
  render: function Render(args) {
    const handleClick = () => {
      const { close } = openAntdModal(ResourceSelectorModal, {
        type: args.type,
        onOk: (res) => {
          const { onOk } = args;
          onOk?.(res);
          close();
        },
      });
    };
    return (
      <Button type="primary" onClick={handleClick}>
        选择镜像
      </Button>
    );
  },
};
