import React from 'react';
import PropTypes from 'prop-types';

import {
  StyledAdFormat,
  StyledPreview,
  PREVIEWS,
  SVG_PREVIEWS,
  FORMATS,
  SVGS,
} from './style';

const AdFormat = ({
  name,
  classNames,
  isPreview,
  isSvgPreview,
}) => {
  if (isPreview) {
    return PREVIEWS[name] ? (
      <StyledPreview
        name={name}
        className={classNames}
      />
    ) : null;
  }
  if (isSvgPreview) {
    return SVG_PREVIEWS[name] ? (
      <StyledAdFormat
        className={classNames}
        dangerouslySetInnerHTML={{__html: SVG_PREVIEWS[name]}}
      />
    ) : null;
  }

  return SVGS[name] ? (
    <StyledAdFormat
      className={classNames}
      dangerouslySetInnerHTML={{__html: SVGS[name]}}
    />
  ) : null;
};

export const componentProps = {
  ads: Object.values(FORMATS),
};

AdFormat.propTypes = {
  name: PropTypes.oneOf(componentProps.ads).isRequired,
  classNames: PropTypes.string,
  isPreview: PropTypes.bool,
  isSvgPreview: PropTypes.bool,
};

AdFormat.defaultProps = {
  classNames: '',
  isPreview: false,
  isSvgPreview: false,
};

export default AdFormat;

export {
  FORMATS,
  SVGS,
  PREVIEWS,
  SVG_PREVIEWS,
};