import React from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';

import { noop } from 'utils/common';

import { SimpleListItem } from './SimpleListItem';
import { THEME } from '../../constants';

export default {
  title: 'ReactComponentLibrary/SimpleListItem',
  component: SimpleListItem,
  decorators: [
    (Story): JSX.Element => (
      <div
        className="centered-layout"
        style={{ width: '300px' }}
      >
        <Story />
      </div>
    ),
  ],
} as ComponentMeta<typeof SimpleListItem>;

const Template: ComponentStory<typeof SimpleListItem> = (args) => <SimpleListItem {...args} />;

export const RegularLightWithLabel = Template.bind({});
RegularLightWithLabel.args = {
  label: 'Title',
  theme: THEME.light,
  onActionClick: noop,
};

export const RegularLightWithLabelWithoutAction = Template.bind({});
RegularLightWithLabelWithoutAction.args = {
  label: 'Title',
  theme: THEME.light,
  onActionClick: undefined,
};

export const RegularLightWithLongLabelWithoutAction = Template.bind({});
RegularLightWithLongLabelWithoutAction.args = {
  label: 'Simple list item with really long title inside ',
  theme: THEME.light,
  onActionClick: undefined,
};

export const RegularLightWithLabelAndCustomIcon = Template.bind({});
RegularLightWithLabelAndCustomIcon.args = {
  label: 'Title and custom icon',
  theme: THEME.light,
  actionIcon: 'plus',
  onActionClick: noop,
};

export const RegularLightWithLongLabel = Template.bind({});
RegularLightWithLongLabel.args = {
  label: 'Simple list item with really long title inside ',
  theme: THEME.light,
  onActionClick: noop,
};