import CodeSelectorModal from '@/components/CodeSelectorModal';
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 { codeListData } from './mockData';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/CodeSelectorModal 代码选择对话框',
  component: CodeSelectorModal,
  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/codeConfig', () => {
          return HttpResponse.json(codeListData);
        }),
      ],
    },
  },
  // 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: '对话框是否可见',
    },
  },
  // 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 CodeSelectorModal>;

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

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args

export const Primary: Story = {
  render: function Render(args) {
    const handleClick = () => {
      const { close } = openAntdModal(CodeSelectorModal, {
        onOk: (res) => {
          const { onOk } = args;
          onOk?.(res);
          close();
        },
      });
    };
    return (
      <Button type="primary" onClick={handleClick}>
        选择代码配置
      </Button>
    );
  },
};
