import { faker } from '@faker-js/faker';
import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { createGroups } from '../../helpers/storybook';
import { IconName } from '../Icons/Icons.models';
import { EmptyStation } from './EmptyStation';

const groups = createGroups({
  Storybook: [],
  Behavior: [
    'minimizedHeader',
    'bulkActionsDisabled',
    'openBulkActionsOnStart',
    'onBulkActionsToggled',
    'setTabTitle',
  ],
  Content: ['title', 'subtitle', 'children', 'stationError', 'actions'],
  Styling: ['className'],
});

const meta: Meta<typeof EmptyStation> = {
  title: 'Primary Components/Station Controls/EmptyStation',
  component: EmptyStation,
  argTypes: {
    ...groups,
    actions: {
      ...groups.actions,
      control: 'boolean',
    },
    stationError: {
      ...groups.stationError,
      control: 'boolean',
    },
  },
};
export default meta;

export const Default: StoryObj<typeof EmptyStation> = {
  render: (args) => (
    <EmptyStation
      {...args}
      actions={
        args.actions
          ? [
              {
                label: 'Test Action',
                kind: 'action',
                onClick: action('Action.onClick'),
                icon: IconName.X,
              },
              {
                label: 'Bulk Actions',
                icon: IconName.Bulk,
                kind: 'group',
                actions: [
                  {
                    label: 'Test Bulk Action',
                    onClick: action('BulkAction.onClick'),
                    icon: IconName.X,
                  },
                ],
              },
            ]
          : undefined
      }
      stationError={
        args.stationError
          ? {
              title: 'An error has occurred',
              body: 'Error body',
              onClose: action('onCloseClicked'),
              onRetry: action('onRetryClicked'),
            }
          : undefined
      }
    >
      <div>
        <h1 style={{ textAlign: 'center' }}>Your station content goes here</h1>
        {Array.from({ length: 10 }, (_, i) => i + 1).map((i) => (
          <p key={i}>
            {faker.lorem.paragraph(faker.datatype.number({ min: 10, max: 50 }))}
          </p>
        ))}
      </div>
    </EmptyStation>
  ),
  args: {
    title: 'Title',
    subtitle: 'My Asset Type',
  },
};
