// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

import { InlineStyledText } from './index';
import type { InlineStyledTextProps } from './inline-styled-text.proptypes';
import { configDocs } from '../../../.storybook/config-docs';
import docs from './INLINE_STYLED_TEXT.mkd';

const InlineStyledTextDemo = ({
  text,
  baseSpanProps,
  inlineSpanProps,
}: InlineStyledTextProps) => {
  return (
    <InlineStyledText
      {...{
        text,
        baseSpanProps: baseSpanProps || { fontSize: 'f5' },
        inlineSpanProps: inlineSpanProps || {
          casing: 'uppercase',
          colorName: 'brand-primary-base',
        },
      }}
    />
  );
};

const DefaultStory = () => (
  <InlineStyledTextDemo text="This is the [[styled]] text." />
);

const BoldStory = () => (
  <InlineStyledTextDemo
    text="This is the [[styled]] text."
    baseSpanProps={{ fontSize: 'f5', bold: true }}
  />
);

const NoPrefixStory = () => <InlineStyledTextDemo text="[[styled]] text." />;

const NoSuffixStory = () => <InlineStyledTextDemo text="This is [[styled]]" />;

const NoStyledTextStory = () => (
  <InlineStyledTextDemo text="This is the text." />
);

const LongWrappingTextStory = () => (
  <InlineStyledTextDemo text="This is a longer sentence with [[more styled text]] than ever before while being so long that it wraps!!" />
);

const MultipleStyledSubstringsStory = () => (
  <InlineStyledTextDemo text="This is a sentence with [[styled text]] and [[even more here]]" />
);

storiesOf('One-off/InlineStyledText', module)
  .addDecorator(withInfo(configDocs(docs, InlineStyledText)))
  .add('default', DefaultStory)
  .add('bold', BoldStory)
  .add('no prefix', NoPrefixStory)
  .add('no suffix', NoSuffixStory)
  .add('no styled text', NoStyledTextStory)
  .add('long text that wraps', LongWrappingTextStory)
  .add('multiple styled substrings', MultipleStyledSubstringsStory);
