import React from 'react';
import {storiesOf} from '@storybook/react';

import AdFormat, {SVGS, PREVIEWS, SVG_PREVIEWS} from '../../Components/AdFormat';
import adFormatNote from '../../Components/AdFormat/README.md';
import './styles.scss';

const animations = Object.keys(SVGS);
const previews = Object.keys(PREVIEWS);
const svgPreviews = Object.keys(SVG_PREVIEWS);

export default storiesOf('Components | AdFormat', module)
  .add('Animations', () => (
    <div
      style={{
        display: 'grid',
        gridAutoFlow: 'row',
        gridTemplateColumns: '270px 270px 270px',
        gridTemplateRows: '300px 300px 300px',
      }}
    >
      {animations.map((formatName) => (
        <div
          style={{
            fontWeight: 'bold',
            textAlign: 'center',
          }}
        >
          <AdFormat name={formatName} classNames="Stories_size" />
          <div>
            {formatName}
          </div>
        </div>
      ))}
    </div>
  ), {
    notes: adFormatNote,
  })
  .add('Preview', () => (
    <div
      style={{
        display: 'grid',
        gridAutoFlow: 'row',
        gridTemplateColumns: '270px 270px 270px',
        gridTemplateRows: '300px 300px 300px',
      }}
    >
      {previews.map((formatName) => (
        <div
          style={{
            fontWeight: 'bold',
            textAlign: 'center',
          }}
        >
          <AdFormat name={formatName} classNames="Stories_size" isPreview />
          <div>
            {formatName}
          </div>
        </div>
      ))}
    </div>
  ))
  .add('SvgPreview', () => (
    <div
      style={{
        display: 'grid',
        gridAutoFlow: 'row',
        gridTemplateColumns: '270px 270px 270px',
        gridTemplateRows: '300px 300px 300px',
      }}
    >
      {svgPreviews.map((formatName) => (
        <div
          style={{
            fontWeight: 'bold',
            textAlign: 'center',
          }}
        >
          <AdFormat name={formatName} classNames="Stories_size" isSvgPreview/>
          <div>
            {formatName}
          </div>
        </div>
      ))}
    </div>
  ));