import MenuIconSelector from '@/components/MenuIconSelector';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button } from 'antd';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/MenuIconSelector 菜单图标选择器',
  component: MenuIconSelector,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
  // 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: {
    open: {
      control: 'boolean',
      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 MenuIconSelector>;

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 = {
  args: {
    selectedIcon: 'manual-icon',
    open: false,
  },
  render: function Render({ onOk, onCancel, ...args }) {
    const [{ open, selectedIcon }, updateArgs] = useArgs();
    function onClick() {
      updateArgs({ open: true });
    }
    function handleOk(value: string) {
      updateArgs({ selectedIcon: value, open: false });
      onOk?.(value);
    }

    function handleCancel() {
      updateArgs({ open: false });
      onCancel?.();
    }

    return (
      <>
        <Button type="primary" onClick={onClick}>
          打开 MenuIconSelector
        </Button>
        <MenuIconSelector
          {...args}
          open={open}
          selectedIcon={selectedIcon}
          onOk={handleOk}
          onCancel={handleCancel}
        />
      </>
    );
  },
};