import FormInfo from '@/components/FormInfo';
import type { Meta, StoryObj } from '@storybook/react';
import { Form, Input, Select, Typography } from 'antd';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/FormInfo 表单信息',
  component: FormInfo,
  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: { onClick: fn() },
} satisfies Meta<typeof FormInfo>;

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: {
    style: { width: '200px' },
    value:
      '超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本',
  },
};

export const InForm: Story = {
  render: () => {
    return (
      <Form
        name="form"
        style={{ width: 300 }}
        labelCol={{ flex: '150px' }}
        initialValues={{
          text: '文本',
          large_text:
            '超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本',
          multiline_text: `多行文本\n超长文本超长文本超长文本超长文本\n    多行文本`,
          object_text: {
            value: 1,
            showValue: '对象文本',
          },
          select_text: 1,
          select_map_text: 1,
          ant_input_text:
            '超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本',
          ant_select_text: 1,
          ant_select_ellipsis_text: 1,
        }}
      >
        <Form.Item label="文本" name="text">
          <FormInfo />
        </Form.Item>
        <Form.Item label="超长文本" name="large_text">
          <FormInfo />
        </Form.Item>
        <Form.Item label="多行文本" name="multiline_text">
          <FormInfo textArea />
        </Form.Item>
        <Form.Item label="对象" name="object_text">
          <FormInfo valuePropName="showValue" />
        </Form.Item>
        <Form.Item label="无内容" name="empty_text">
          <FormInfo />
        </Form.Item>
        <Form.Item label="模拟 Select" name="select_text">
          <FormInfo
            select
            options={[
              {
                label:
                  '超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本',
                value: 1,
              },
            ]}
          />
        </Form.Item>
        <Form.Item label="模拟 Select Map" name="select_map_text">
          <FormInfo
            select
            options={[
              {
                otherLabel:
                  '超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本',
                otherValue: 1,
              },
            ]}
            fieldNames={{
              label: 'otherLabel',
              value: 'otherValue',
            }}
          />
        </Form.Item>
        <Form.Item label="Input" name="ant_input_text">
          <Input disabled />
        </Form.Item>
        <Form.Item label="Select" name="ant_select_text">
          <Select
            disabled
            options={[
              {
                label:
                  '超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本',
                value: 1,
              },
            ]}
          />
        </Form.Item>
        <Form.Item label="Select Ellipsis" name="ant_select_ellipsis_text">
          <Select
            labelRender={(props) => {
              return (
                <div style={{ width: '100%', lineHeight: 'normal' }}>
                  <Typography.Text ellipsis={{ tooltip: props.label }} style={{ margin: 0 }}>
                    {props.label}
                  </Typography.Text>
                </div>
              );
            }}
            disabled
            options={[
              {
                label:
                  '超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本',
                value: 1,
              },
            ]}
          />
        </Form.Item>
      </Form>
    );
  },
};
