import BasicInfo from '@/components/BasicInfo';
import { formatDate } from '@/utils/date';
import { formatList } from '@/utils/format';
import type { Meta, StoryObj } from '@storybook/react';
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/BasicInfo 基本信息',
  component: BasicInfo,
  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 BasicInfo>;

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: {
    datas: [
      { label: '服务名称', value: '手写体识别' },
      {
        label: '无数据',
        value: '',
      },
      {
        label: '外部链接',
        value: 'https://www.baidu.com/',
        format: (value: string) => {
          return {
            value: '百度',
            url: value,
          };
        },
      },
      {
        label: '内部链接',
        value: 'https://www.baidu.com/',
        format: () => {
          return {
            value: '实验',
            link: '/pipeline/experiment/instance/1/1',
          };
        },
      },
      { label: '日期', value: new Date(), format: formatDate },
      { label: '数组', value: ['a', 'b', 'c'], format: formatList },
      {
        label: '带省略号',
        value: '这是一个很长的字符串这是一个很长的字符串这是一个很长的字符串这是一个很长的字符串',
      },
      {
        label: '多行',
        value: [
          {
            label: '服务名称',
            value: '手写体识别',
          },
          {
            label: '服务名称',
            value: '人脸识别',
          },
        ],
        format: (value: any) =>
          value.map((item: any) => ({
            value: item.label + ':' + item.value,
          })),
      },
      {
        label: '自定义组件',
        value: (
          <Button type="primary" style={{ height: 26 }}>
            click
          </Button>
        ),
      },
    ],
    labelWidth: 80,
    labelAlign: 'justify',
    threeColumns: false,
    labelEllipsis: true,
  },
};

/** 一行三列 */
export const ThreeColumn: Story = {
  args: {
    ...Primary.args,
    labelAlign: 'start',
    threeColumns: true,
  },
};
