import { addParameters, addDecorator } from '@storybook/react';
import { withKnobs, text } from '@storybook/addon-knobs';
import React from 'react';

import { FeatureIcon, Box, Image } from '../../src';
import featureIconNotes from './FeatureIcon.md';

export default {
  title: 'Feature Icon',
  component: FeatureIcon,
  decorators: [withKnobs],
};

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

export const simple = () => {
  const group = 'Props';

  const title = text('Title', 'Title', group);
  const subtitle = text('Subtitle', 'Sub Title', group);
  const image = text(
    'Icon',
    'https://image.flaticon.com/icons/svg/2448/2448674.svg',
    group,
  );

  return (
    <FeatureIcon
      title={title}
      subtitle={subtitle}
      icon={image}
      settings={{
        width: '200px',
        margin: '0 auto',
      }}
    />
  );
};

export const longText = () => {
  const group = 'Props';

  const title = text('Title', 'This is a long text for the title', group);
  const subtitle = text(
    'Subtitle',
    'This is a long text for the subtitle',
    group,
  );
  const image = text(
    'Icon',
    'https://image.flaticon.com/icons/svg/2448/2448674.svg',
    group,
  );

  return (
    <FeatureIcon
      title={title}
      subtitle={subtitle}
      icon={image}
      settings={{
        width: '200px',
        margin: '0 auto',
      }}
    />
  );
};

export const anotherElement = () => {
  const group = 'Props';

  const title = text('Title', 'Title', group);
  const subtitle = text('Subtitle', 'Sub Title', group);

  const image = (
    <Image src="https://image.flaticon.com/icons/svg/2448/2448674.svg" />
  );

  return (
    <FeatureIcon
      title={title}
      subtitle={subtitle}
      icon={image}
      settings={{
        width: '200px',
        margin: '0 auto',
      }}
    />
  );
};

addDecorator((featureIcon) => <Box width="100%">{featureIcon()}</Box>);