import { action } from '@storybook/addon-actions';
import { select, text, boolean } from '@storybook/addon-knobs';

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

import DefinitionList from './DefinitionList';

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

const definitions = [
  {
    title: text('title', 'Editable title'),
    value: text('value', 'Editable 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: 'And values with long words will eventuallybreakontothenextline',
    key: 'third',
  },
];

export const Basic = () => {
  const muted = boolean('muted', false);
  const layout = select(
    'layout',
    [
      Layout.VERTICAL_TWO_COLUMN,
      Layout.VERTICAL_ONE_COLUMN,
      Layout.HORIZONTAL_JUSTIFIED,
      Layout.HORIZONTAL_LEFT_ALIGNED,
      Layout.HORIZONTAL_RIGHT_ALIGNED,
    ],
    Layout.HORIZONTAL_LEFT_ALIGNED,
  );

  return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
};

export const WithActionButtons = () => {
  const muted = boolean('muted', false);
  const layout = select(
    'layout',
    [
      Layout.VERTICAL_TWO_COLUMN,
      Layout.VERTICAL_ONE_COLUMN,
      Layout.HORIZONTAL_JUSTIFIED,
      Layout.HORIZONTAL_LEFT_ALIGNED,
      Layout.HORIZONTAL_RIGHT_ALIGNED,
    ],
    Layout.HORIZONTAL_LEFT_ALIGNED,
  );

  return (
    <DefinitionList
      layout={layout}
      muted={muted}
      definitions={[
        ...definitions,
        {
          title: 'Action buttons are useful',
          value: 'You can do all kinds of neat things with actions buttons!',
          key: 'fourth',
          action: {
            label: 'Epic button',
            onClick: action('Probably the best action event you have ever seen, in the world!'),
          },
        },
        {
          title: 'tiny',
          value: 'tiny',
          key: 'fifth',
          action: {
            label: 'Epic button',
            onClick: action('Hello from the Tiny Button :)'),
          },
        },
      ]}
    />
  );
};
