import ParameterInput, { ParameterInputValue } from '@/components/ParameterInput';
import { action } from '@storybook/addon-actions';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button } from 'antd';
import { useState } from 'react';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/ParameterInput 参数输入框',
  component: ParameterInput,
  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: {
    // backgroundColor: { control: 'color' },
  },
  // 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: { onChange: fn() },
} satisfies Meta<typeof ParameterInput>;

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

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Input: Story = {
  args: {
    placeholder: '请输入工作目录',
    style: { width: 300 },
    canInput: true,
    textArea: false,
    allowClear: true,
    size: 'large',
  },
};

export const Select: Story = {
  args: {
    placeholder: '请输入工作目录',
    style: { width: 300 },
    canInput: true,
    size: 'large',
  },
  render: function Render(args) {
    const [value, setValue] = useState<ParameterInputValue | undefined>('');

    const onClick = () => {
      const value = {
        value: 'storybook',
        showValue: 'storybook',
        fromSelect: true,
        otherValue: 'others',
      };
      setValue(value);
      action('onChange')(value);
    };
    return (
      <>
        <ParameterInput
          {...args}
          value={value}
          onChange={(value) => {
            setValue(value);
            action('onChange')(value);
          }}
        ></ParameterInput>
        <Button type="primary" style={{ display: 'block', marginTop: 10 }} onClick={onClick}>
          模拟从全局参数选择
        </Button>
      </>
    );
  },
};

export const Ellipse: Story = {
  args: {
    placeholder: '请输入工作目录',
    style: { width: 300 },
    canInput: true,
    size: 'large',
  },
  render: function Render(args) {
    const [value, setValue] = useState<ParameterInputValue | undefined>('');

    const onClick = () => {
      const value = {
        value: 'storybook',
        showValue:
          'storybookstorybookstorybookstorybookstorybookstorybookstorybookstorybookstorybookstorybook',
        fromSelect: true,
        otherValue: 'others',
      };
      setValue(value);
      action('onChange')(value);
    };
    return (
      <>
        <ParameterInput
          {...args}
          value={value}
          onChange={(value) => {
            setValue(value);
            action('onChange')(value);
          }}
        ></ParameterInput>
        <Button type="primary" style={{ display: 'block', marginTop: 10 }} onClick={onClick}>
          模拟从全局参数选择
        </Button>
      </>
    );
  },
};

export const Disabled: Story = {
  args: {
    placeholder: '请输入工作目录',
    style: { width: 300 },
    value: {
      value: 'storybook',
      showValue: 'storybook',
      fromSelect: true,
    },
    canInput: true,
    size: 'large',
    disabled: true,
  },
};