import { faker } from '@faker-js/faker';
import { Meta, StoryObj } from '@storybook/react';
import { createGroups, generateItemArray } from '../../../helpers/storybook';
import { DynamicListColumn } from '../../DynamicDataList/DynamicDataList.model';
import { DynamicDataListControl } from './DynamicDataListControl';

interface DynamicListStoryData {
  position: number;
  id: number;
  desc: string;
  title: string;
}

type DynamicDataListStoryType =
  typeof DynamicDataListControl<DynamicListStoryData>;

const defaultColumns: DynamicListColumn<DynamicListStoryData>[] = [
  {
    propertyName: 'id',
    label: 'Id',
  },
  {
    propertyName: 'title',
    label: 'Title',
  },
  {
    propertyName: 'desc',
    label: 'Description',
  },
];

const generateData = (amount: number): DynamicListStoryData[] =>
  generateItemArray(amount, (index) => ({
    position: index + 1,
    id: index,
    desc: `Description ${index}: ${faker.lorem.words(
      faker.datatype.number({ min: 10, max: 20 }),
    )}`,
    title: `Item ${index}: ${faker.random.words(
      faker.datatype.number({ min: 1, max: 3 }),
    )}`,
  }));

const groups = createGroups({
  Behavior: [
    'disabled',
    'inlineMode',
    'name',
    'id',
    'showHeader',
    'stickyHeader',
    'allowReordering',
    'allowAddAndRemove',
    'allowRowDragging',
    'allowNewData',
  ],
  Content: [
    'label',
    'error',
    'tooltipContent',
    'value',
    'positionPropertyName',
    'positionLabel',
    'columns',
    'customDataEntry',
    'rowValidationSchema',
    'defaultValuesForNewData',
    'onAddTransformData',
    'maxItemLimit',
    'inlineMenuActions',
  ],
  Styling: [
    'className',
    'columnGap',
    'minimumWidth',
    'headerRowHeight',
    'listRowHeight',
    'listRowActionSize',
    'rowGap',
    'horizontalTextAlign',
    'verticalTextAlign',
    'rowClassNameProvider',
  ],
  Events: ['onChange'],
});

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

export const Main: StoryObj<DynamicDataListStoryType> = {
  args: {
    name: 'ddlcontrol',
    label: 'DDL Control',
    tooltipContent: faker.lorem.sentences(4),
    positionPropertyName: 'position',
    value: generateData(5),
    columns: defaultColumns,
    //TODO: investigate why this is needed - looks like it gets mocked out somehow
    onAddTransformData: undefined,
  },
};
