import styled, {css} from 'styled-components';

import PreviewInterstitial from './previews/interstitial.png';
import PreviewOnclick from './previews/onclick.png';
import PreviewNativeads from './previews/push-notification.png';
import PreviewLink from './previews/smart-link.png';
import PreviewInPagePush from './previews/in-page-push.png';
import PreviewMultitag from './previews/multitag.png';
import PreviewNativeWidget from './previews/native-widget.png';
import PreviewNative from './previews/native-banner.png';

import PreviewInterstitialSvg from './svgPreviews/interstitial.svg';
import PreviewOnclickSvg from './svgPreviews/onclick.svg';
import PreviewNativeadsSvg from './svgPreviews/push-notification.svg';
import PreviewLinkSvg from './svgPreviews/smart-link.svg';
import PreviewInPagePushSvg from './svgPreviews/in-page-push.svg';
import PreviewMultitagSvg from './svgPreviews/multitag.svg';
import PreviewVignette from './svgPreviews/vignette.svg';

import AnimationInterstitial from './animations/interstitial.svg';
import AnimationNative from './animations/native-banner.svg';
import AnimationOnclick from './animations/onclick.svg';
import AnimationNativeads from './animations/push-notification.svg';
import AnimationLink from './animations/smart-link.svg';
import AnimationDirectLink from './animations/link-classic.svg';
import AnimationPushLink from './animations/link-push.svg';
import AnimationWebsite from './animations/website.svg';
import AnimationLandingPage from './animations/landing-page.svg';
import AnimationInPagePush from './animations/in-page-push.svg';
import AnimationNativeWidget from './animations/native-widget.svg';
import AnimationMultitag from './animations/multitag.svg';

const FORMATS = {
  INTERSTITIAL: 'interstitial',
  NATIVE: 'native',
  ONCLICK: 'onclick',
  NATIVEADS: 'nativeads',
  LINK: 'link',
  DIRECT_LINK: 'direct_link',
  PUSH_LINK: 'push_link',
  WEBSITE: 'website',
  LANDING_PAGE: 'landing_page',
  IN_PAGE_PUSH: 'in_page_push',
  NATIVE_WIDGET: 'native_widget',
  MULTITAG: 'multitag',
  VIGNETTE: 'vignette',
};

const SVGS = {
  [FORMATS.INTERSTITIAL]: AnimationInterstitial,
  [FORMATS.NATIVE]: AnimationNative,
  [FORMATS.ONCLICK]: AnimationOnclick,
  [FORMATS.NATIVEADS]: AnimationNativeads,
  [FORMATS.LINK]: AnimationLink,
  [FORMATS.DIRECT_LINK]: AnimationDirectLink,
  [FORMATS.PUSH_LINK]: AnimationPushLink,
  [FORMATS.WEBSITE]: AnimationWebsite,
  [FORMATS.LANDING_PAGE]: AnimationLandingPage,
  [FORMATS.IN_PAGE_PUSH]: AnimationInPagePush,
  [FORMATS.NATIVE_WIDGET]: AnimationNativeWidget,
  [FORMATS.MULTITAG]: AnimationMultitag,
};

const SVG_PREVIEWS = {
  [FORMATS.INTERSTITIAL]: PreviewInterstitialSvg,
  [FORMATS.ONCLICK]: PreviewOnclickSvg,
  [FORMATS.NATIVEADS]: PreviewNativeadsSvg,
  [FORMATS.LINK]: PreviewLinkSvg,
  [FORMATS.IN_PAGE_PUSH]: PreviewInPagePushSvg,
  [FORMATS.MULTITAG]: PreviewMultitagSvg,
  [FORMATS.VIGNETTE]: PreviewVignette,
};

const PREVIEWS = {
  [FORMATS.INTERSTITIAL]: PreviewInterstitial,
  [FORMATS.ONCLICK]: PreviewOnclick,
  [FORMATS.NATIVEADS]: PreviewNativeads,
  [FORMATS.LINK]: PreviewLink,
  [FORMATS.IN_PAGE_PUSH]: PreviewInPagePush,
  [FORMATS.MULTITAG]: PreviewMultitag,
  [FORMATS.NATIVE]: PreviewNative,
  [FORMATS.NATIVE_WIDGET]: PreviewNativeWidget,
};

const StyledAdFormat = styled.div`
    display: inline-block;
`;

const StyledPreview = styled.img.attrs((props) => ({
  src: PREVIEWS[props.name],
  alt: `${props.name} ad format`,
}))``;

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