import { addParameters } from '@storybook/react';
import { withKnobs, select, boolean, number } from '@storybook/addon-knobs';

import React from 'react';

import { Heading, Subtitle, Text } from '../../src/Typography';
import typographyNotes from './Typography.md';

export default {
  title: 'Typography',
  component: Heading,
  decorators: [withKnobs],
};

addParameters({ info: { text: typographyNotes } });

export const Headings = () => {
  const label = 'as';
  const options = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
  const defaultValue = 'h1';
  const groupId = 'Props';
  const value = select(label, options, defaultValue, groupId);

  return <Heading as={value}>This is a title</Heading>;
};

export const Subtitles = () => {
  const label = 'variation';
  const options = ['normal', 'special'];
  const defaultValue = 'normal';
  const groupId = 'Props';
  const value = select(label, options, defaultValue, groupId);

  return <Subtitle variation={value}>This is a subtitle</Subtitle>;
};

export const Texts = () => {
  const lines = number('Lines', 3, {
    range: true,
    min: 1,
    max: 10,
    step: 1,
  });

  return (
    <Text
      textOverflow={boolean('Text Overflow', false)}
      lines={lines}
      width="500px"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa
      augue, efficitur euismod nisi eget, elementum condimentum leo. Etiam eu
      dolor a velit molestie lacinia eu sed lorem. Proin sed sapien eu risus
      gravida convallis placerat ut nibh. Praesent eu aliquam arcu. Orci varius
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      Pellentesque ultrices metus eu odio sodales iaculis. Nam eget dui eros.
      Etiam porta tempor semper. Morbi consectetur nisl ac lorem dictum, nec
      suscipit nibh auctor.
    </Text>
  );
};