import { action } from 'storybook/actions';

import { Layout } from '../common';

import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
import { lorem10 } from '../test-utils';
import Section from '../section';
import Header from '../header';

export default {
  component: DefinitionList,
  title: 'Typography/DefinitionList',
};

const layouts: DefinitionListLayout[] = [
  Layout.VERTICAL_TWO_COLUMN,
  Layout.VERTICAL_ONE_COLUMN,
  Layout.HORIZONTAL_JUSTIFIED,
  Layout.HORIZONTAL_LEFT_ALIGNED,
  Layout.HORIZONTAL_RIGHT_ALIGNED,
];

const definitions = [
  {
    title: 'Definition List title',
    value: 'Definition List value',
    key: 'first',
  },
  {
    title: 'Use wrapper elements to style',
    value: <span className="np-text-title-subsection">89.45GBP</span>,
    key: 'second',
  },
  {
    title: 'Long strings will wrap',
    value: lorem10,
    key: 'third',
  },
];

export const Basic = () => {
  return layouts.map((layout) => (
    <Section key={layout}>
      <Header title={`Instace of: ${layout}`} />
      <DefinitionList layout={layout} definitions={definitions} />
    </Section>
  ));
};

export const WithActionButtons = () => {
  return (
    <>
      {layouts.map((layout) => (
        <Section key={layout}>
          <Header title={`Instace of: ${layout}`} />
          <DefinitionList
            key={layout}
            layout={layout}
            definitions={[
              ...definitions,
              {
                title: 'Action buttons are useful',
                value: lorem10,
                key: 'fourth',
                action: {
                  label: 'Epic button',
                  onClick: action(lorem10),
                },
              },
              {
                title: 'tiny',
                value: 'tiny',
                key: 'fifth',
                action: {
                  label: 'Epic button',
                  onClick: action(lorem10),
                },
              },
            ]}
          />
        </Section>
      ))}
    </>
  );
};

export const Muted = () => {
  return <DefinitionList muted definitions={definitions} />;
};