import { arrow_right } from 'pn-design-assets/pn-assets/icons.js';

import {
  appImages,
  imageUrls,
} from '../../../globals/storybookGlobals';
import docs from "./pn-usp-promoter-docs.json";

export default {
  title: 'Components/Widgets/Usp Promoter',
  parameters: {
    notes: docs,
  },
};

const Template = ({ ...args }) => {
  return `
  <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>
    <pn-usp-promoter
      heading="${args.heading}"
      heading-extension="${args.headingExtension}"
      body-text="${args.bodyText}"
      background-gradient="${args.backgroundGradient}"
      full-width="${args.fullWidth}"
      right-align="${args.rightAlign}"
      hide-mobile-image="${args.hideMobileImage}">
      <div slot="app-store">
        <a href="http://www.apple.com">
          <img src="${appImages.postnordAppStore}">
        </a>
        <a href="http://www.google.com">
          <img src="${appImages.postnordGooglePlay}">
        </a>
      </div>
      <div slot="usp-buttons">
        <pn-button href=${args.buttonUrl}>${args.buttonLabel} <pn-icon icon='${arrow_right}'></pn-icon></pn-button>
      </div>
      <div slot="illustration">
        <pn-scroll>
          <div slot="scroll-affected">
            <picture>
              <img src="${imageUrls.mobileIllustration}" />
            </picture>
          </div>
        </pn-scroll>
      </div>
      <pn-scroll>
        <div slot="scroll-affected">
          <picture>
            <img src="${imageUrls.mobileIllustration}" />
          </picture>
        </div>
      </pn-scroll>
    </div>
    </pn-usp-promoter>
  `;
};

export const Primary = Template.bind({});
Primary.args = {
  heading: 'Track your PostNord',
  headingExtension: 'parcels automatically',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien ornare, dictum massa eu, tristique quam. Suspendisse imperdiet a ipsum dictum laoreet. Praesent bibendum tincidunt sem sit amet pulvinar. Phasellus egestas orci non metus viverra malesuada. Nulla facilisi. Nulla et justo faucibus, sodales metus ',
  buttonLabel: 'See all about the app',
  buttonUrl: 'http://www.google.se',
  backgroundGradient: 'linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)',
  fullWidth: true,
  rightAlign: true,
};

const WithImageTemplate = ({ ...args }) => {
  return `
  <pn-usp-promoter
    heading="${args.heading}"
    heading-extension="${args.headingExtension}"
    body-text="${args.bodyText}"
    background-gradient="${args.backgroundGradient}"
    full-width="${args.fullWidth}"
    right-align="${args.rightAlign}"
    hide-mobile-image="${args.hideMobileImage}">
    <div slot="app-store">
      <a href="http://www.apple.com">
        <img src="${appImages.postnordAppStore}">
      </a>
      <a href="http://www.google.com">
        <img src="${appImages.postnordGooglePlay}">
      </a>
    </div>
    <div slot="usp-buttons">
      <pn-button href=${args.buttonUrl}>${args.buttonLabel} <pn-icon icon="${arrow_right}"></pn-icon></pn-button>
    </div>
    <div slot="illustration">
      <pn-scroll>
        <div slot="scroll-affected">
          <picture>
            <img src="${imageUrls.mobileIllustration}" />
          </picture>
        </div>
      </pn-scroll>
    </div>
    <pn-scroll>
      <div slot="scroll-affected">
        <picture>
          <img src="${imageUrls.mobileIllustration}" />
        </picture>
      </div>
    </pn-scroll>
  </div>
  </pn-usp-promoter>
`;
};

export const WithImage = WithImageTemplate.bind({});
WithImage.args = {
  heading: 'Track your PostNord',
  headingExtension: 'parcels automatically',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien ornare, dictum massa eu, tristique quam. Suspendisse imperdiet a ipsum dictum laoreet. Praesent bibendum tincidunt sem sit amet pulvinar. Phasellus egestas orci non metus viverra malesuada. Nulla facilisi. Nulla et justo faucibus, sodales metus ',
  buttonLabel: 'See all about the app',
  buttonUrl: 'http://www.google.se',
  backgroundGradient: 'linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)',
  fullWidth: true,
  rightAlign: true,
  hideMobileImage: false,
};

const NoImageTemplate = ({ ...args }) => {
  return `
    <pn-usp-promoter
      heading="${args.heading}"
      heading-extension="${args.headingExtension}"
      body-text="${args.bodyText}"
      background-gradient="${args.backgroundGradient}"
      full-width="${args.fullWidth}"
      right-align="${args.rightAlign}"
      hide-mobile-image="${args.hideMobileImage}">
      <div slot="app-store">
        <a href="http://www.apple.com">
          <img src="${appImages.postnordAppStore}">
        </a>
        <a href="http://www.google.com">
          <img src="${appImages.postnordGooglePlay}">
        </a>
      </div>
      <div slot="usp-buttons">
        <a href=${args.buttonUrl}>${args.buttonLabel} <pn-icon icon="${arrow_right}"></pn-icon></a>
      </div>
      <pn-scroll>
        <div slot="scroll-affected">
          <picture>
            <img src="${imageUrls.mobileIllustration}" />
          </picture>
        </div>
      </pn-scroll>
    </div>
    </pn-usp-promoter>
  `;
};

export const NoImage = NoImageTemplate.bind({});
NoImage.args = {
  heading: 'Track your PostNord',
  headingExtension: 'parcels automatically',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien ornare, dictum massa eu, tristique quam. Suspendisse imperdiet a ipsum dictum laoreet. Praesent bibendum tincidunt sem sit amet pulvinar. Phasellus egestas orci non metus viverra malesuada. Nulla facilisi. Nulla et justo faucibus, sodales metus ',
  buttonLabel: 'See all about the app',
  buttonUrl: 'http://www.google.se',
  backgroundGradient: 'linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)',
  fullWidth: true,
  rightAlign: true,
  hideMobileImage: false,
};

const MissingProperties = ({ ...args }) => {
  return `
  <pn-usp-promoter>
  </pn-usp-promoter>
  `;
};

export const Empty = MissingProperties.bind({});
Empty.args = {
  heading: 'Track your PostNord',
  headingExtension: 'parcels automatically',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien ornare, dictum massa eu, tristique quam. Suspendisse imperdiet a ipsum dictum laoreet. Praesent bibendum tincidunt sem sit amet pulvinar. Phasellus egestas orci non metus viverra malesuada. Nulla facilisi. Nulla et justo faucibus, sodales metus ',
  buttonLabel: 'See all about the app',
  buttonUrl: 'http://www.google.se',
  backgroundGradient: 'linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)',
  fullWidth: true,
};
