import { faker } from '@faker-js/faker';
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { createGroups } from '../../../helpers/storybook';
import {
  formatDateTime,
  formatFileSize,
  formatSecondsToTimestamp,
  sortArray,
} from '../../Utils';
import { ReadOnlyField } from './ReadOnlyField';

const groups = createGroups({
  Behavior: ['inlineMode', 'id', 'hideIfEmpty', 'transform'],
  Content: ['label', 'tooltipContent', 'value'],
  Styling: ['className'],
});

const meta: Meta<typeof ReadOnlyField> = {
  title: 'Primary Components/Form Elements/ReadOnlyField',
  component: ReadOnlyField,
  argTypes: {
    ...groups,
  },
};
export default meta;

export const Main: StoryObj<typeof ReadOnlyField> = {
  args: {
    label: 'Name',
    value: 'Axinom',
    tooltipContent: faker.lorem.paragraph(2),
  },
};

export const Array: StoryObj<typeof ReadOnlyField> = {
  argTypes: {
    value: { control: { type: 'array' } },
  },
  args: {
    label: 'Name',
    value: ['Navy', 'Axinom'],
  },
};

export const Transform: StoryObj<typeof ReadOnlyField> = {
  parameters: {
    controls: {
      hideNoControlsWarning: true,
      exclude: /.*/g,
    },
  },
  render: (_args) => {
    return (
      <div style={{ display: 'grid', gridGap: 20 }}>
        <ReadOnlyField<string>
          label="formatDateTime"
          value="2020-09-09T00:00:00.000+00:00"
          transform={formatDateTime}
        />
        <ReadOnlyField<number>
          label="formatSecondsToTimestamp"
          value={10000}
          transform={formatSecondsToTimestamp}
        />
        <ReadOnlyField<number>
          label="formatFileSize"
          value={10000}
          transform={formatFileSize}
        />

        <ReadOnlyField<string[]>
          label="sortArray"
          value={['zh', 'en', 'ee', 'fr', 'ar', 'ja', 'ru']}
          transform={sortArray}
        />
      </div>
    );
  },
};
