import docs from "./pn-cta-block-docs.json";
import { arrow_right, open_in_new } from 'pn-design-assets/pn-assets/icons';
import {imageSvgs} from "../../../globals/storybookGlobals";

export default {
  title: 'Components/CTA/Cta block',
  parameters: {
    notes: docs,
  },
  argTypes: {
    pnBackgroundColor: {
      options: ['blue25', 'coral50', 'gray25', 'green25', 'transparent'],
      control: { type: 'select' },
    },
  },
};

const Template = ({ ...args }) => {
  return `
  <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>
  <div style="max-width: 1410px">
    <pn-cta-block
      is-centered="${args.isCentered}"
      is-large="${args.isLarge}"
      is-small="${args.isSmall}"
      pn-background-color="${args.pnBackgroundColor}"
      heading="${args.heading}"
      body-text="${args.bodyText}"
      content-top="${args.contentTop}">
        <div slot="illustration">
          <picture>
            <img src="${imageSvgs.success}" />
          </picture>
        </div>
        <div slot="cta-buttons">
          <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
          <a href=${args.linkUrl}>${args.linkText} <pn-icon icon='${arrow_right}'> </pn-icon></a>
        </div>
      </pn-cta-block>
  </div>
  `;
};

export const Primary = Template.bind({});
Primary.args = {
  contentTop: false,
  heading: 'PostNord erbjuder mycket',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
  buttonText: 'Våra tjänster',
  buttonUrl: 'http://www.google.se',
  linkText: 'Information',
  linkUrl: 'http://www.bing.com',
  pnBackgroundColor: "blue25",
  isLarge: false,
  isCentered: false,
  isSmall: false,
};

const LinkOnlyTemplate = ({ ...args }) => {
  return `
  <div style="max-width: 1410px">
    <pn-cta-block
      is-centered="${args.isCentered}"
      is-large="${args.isLarge}"
      is-small="${args.isSmall}"
      pn-background-color="${args.pnBackgroundColor}"
      heading="${args.heading}"
      body-text="${args.bodyText}"
      content-top="${args.contentTop}">
      <div slot="illustration">
        <picture>
          <img src="${imageSvgs.success}" />
        </picture>
      </div>
      <div slot="cta-buttons">
        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
        <a href=${args.linkUrl}>${args.linkText} <pn-icon icon='${arrow_right}'> </pn-icon></a>
      </div>
    </pn-cta-block>
  </div>
  `;
};

export const LinkOnly = LinkOnlyTemplate.bind({});
LinkOnly.args = {
  heading: 'PostNord erbjuder mycket',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
  buttonText: 'Våra tjänster',
  buttonUrl: '',
  linkText: 'Information',
  linkUrl: 'http://www.bing.com',
  pnBackgroundColor: 'gray25',
  isLarge: true,
  isCentered: false,
  isSmall: false,
};

const TwoButtonLayoutTemplate = ({ ...args }) => {
  return `
  <div style="max-width: 1410px">
    <pn-cta-block
      is-centered="${args.isCentered}"
      is-large="${args.isLarge}"
      is-small="${args.isSmall}"
      pn-background-color="${args.pnBackgroundColor}"
      heading="${args.heading}"
      body-text="${args.bodyText}"
      content-top="${args.contentTop}">
      <div slot="illustration">
        <picture>
          <img src="${imageSvgs.success}" />
        </picture>
      </div>
      <div slot="cta-buttons">
        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
        <pn-button appearance="light" class="cta-block__button " href=${args.buttonUrl}>Second button longer</pn-button>
      </div>
    </pn-cta-block>
  </div>
  `;
};

export const TwoButtonLayout = TwoButtonLayoutTemplate.bind({});
TwoButtonLayout.args = {
  heading: 'PostNord erbjuder mycket',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
  buttonText: 'Våra tjänster',
  buttonUrl: 'http://www.google.se',
  linkText: 'Information',
  linkUrl: 'http://www.bing.com',
  pnBackgroundColor: 'coral50',
  isLarge: true,
  isCentered: false,
  isSmall: false,
};

const TwoLinksLayoutTemplate = ({ ...args }) => {
  return `
  <div style="max-width: 1410px">
    <pn-cta-block
      is-centered="${args.isCentered}"
      is-large="${args.isLarge}"
      is-small="${args.isSmall}"
      pn-background-color="${args.pnBackgroundColor}"
      heading="${args.heading}"
      body-text="${args.bodyText}"
      content-top="${args.contentTop}">
      <div slot="illustration">
        <picture>
          <img src="${imageSvgs.success}" />
        </picture>
      </div>
      <div slot="cta-buttons">
        <a href=${args.linkUrl}>${args.linkText} <pn-icon icon=${arrow_right}> </pn-icon></a>
        <a href=${args.linkUrl}>Second link longer</a>
      </div>
    </pn-cta-block>
  </div>
  `;
}

export const TwoLinksLayout = TwoLinksLayoutTemplate.bind({});
TwoLinksLayout.args = {
  heading: 'PostNord erbjuder mycket',
  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
  buttonText: "Våra tjänster",
  buttonUrl: 'http://www.google.se',
  linkText: 'Information',
  linkUrl: 'http://www.bing.com',
  pnBackgroundColor: 'coral50',
  isLarge: true,
  isCentered: false,
  isSmall: false,
};

const NoImageTemplate = ({ ...args }) => {
  return `
  <div style="max-width: 1410px">
    <pn-cta-block
      is-centered="${args.isCentered}"
      is-large="${args.isLarge}"
      is-small="${args.isSmall}"
      pn-background-color="${args.pnBackgroundColor}"
      heading="${args.heading}"
      body-text="${args.bodyText}"
      content-top="${args.contentTop}">
      <div slot="cta-buttons">
        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
        <a href=${args.linkUrl}>${args.linkText} <pn-icon icon='${open_in_new}'> </pn-icon></a>
      </div>
    </pn-cta-block>
  </div>
  `;
};

export const NoImage = NoImageTemplate.bind({});
NoImage.args = {
  heading: 'PostNord erbjuder mycket',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
  buttonText: 'Våra tjänster',
  buttonUrl: 'http://www.google.se',
  linkText: 'Information',
  linkUrl: '',
  pnBackgroundColor: 'gray25',
  isLarge: true,
  isCentered: false,
  isSmall: false,
};

const LargeTemplate = ({ ...args }) => {
  return `
  <div style="max-width: 1410px">
    <pn-cta-block
      is-centered="${args.isCentered}"
      is-large="${args.isLarge}"
      is-small="${args.isSmall}"
      pn-background-color="${args.pnBackgroundColor}"
      heading="${args.heading}"
      body-text="${args.bodyText}"
      content-top="${args.contentTop}">
      <div slot="illustration">
        <picture>
          <img src="${imageSvgs.success}" />
        </picture>
      </div>
      <div slot="cta-buttons">
        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
        <a href=${args.linkUrl}>${args.linkText} <pn-icon icon='${arrow_right}'> </pn-icon></a>
      </div>
    </pn-cta-block>
  </div>
  `;
};

export const Large = LargeTemplate.bind({});
Large.args = {
  heading: 'PostNord erbjuder mycket',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
  buttonText: 'Våra tjänster',
  buttonUrl: 'http://www.google.se',
  linkText: 'Information',
  linkUrl: 'http://www.bing.com',
  pnBackgroundColor: 'blue25',
  isLarge: true,
  isCentered: false,
  isSmall: false,
};

const LargeCenteredTemplate = ({ ...args }) => {
  return `
  <div style="max-width: 1410px">
    <pn-cta-block
      is-centered="${args.isCentered}"
      is-large="${args.isLarge}"
      is-small="${args.isSmall}"
      pn-background-color="${args.pnBackgroundColor}"
      heading="${args.heading}"
      body-text="${args.bodyText}"
      content-top="${args.contentTop}">
      <div slot="illustration">
        <picture>
          <img src="${imageSvgs.success}" />
        </picture>
      </div>
      <div slot="cta-buttons">
        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
        <a href=${args.linkUrl}>${args.linkText} <pn-icon icon='${arrow_right}'> </pn-icon></a>
      </div>
    </pn-cta-block>
  </div>
  `;
};

export const LargeCentered = LargeCenteredTemplate.bind({});
LargeCentered.args = {
  heading: 'PostNord erbjuder mycket',
  bodyText:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
  buttonText: 'Våra tjänster',
  buttonUrl: 'http://www.google.se',
  linkText: 'Information',
  linkUrl: 'http://www.bing.com',
  pnBackgroundColor: 'blue25',
  isLarge: true,
  isCentered: true,
  isSmall: false,
};

const EmptyTemplate = ({ ...args }) => {
  return `
  <div style="max-width: 1410px">
    <pn-cta-block
      is-centered="${args.isCentered}"
      is-large="${args.isLarge}"
      is-small="${args.isSmall}"
      pn-background-color="${args.pnBackgroundColor}"
      heading=""
      body-text=""
      content-top="${args.contentTop}">
      <div slot="cta-buttons">
        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
        <a href=${args.linkUrl}>${args.linkText} <pn-icon icon=${arrow_right}></pn-icon> </pn-icon></a>
      </div>
    </pn-cta-block>
  </div>
  `;
}

export const Empty = EmptyTemplate.bind({});
Empty.args = {
  heading: 'PostNord erbjuder mycket',
  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
  buttonText: "Våra tjänster",
  buttonUrl: 'http://www.google.se',
  linkText: 'Information',
  linkUrl: 'http://www.bing.com',
  pnBackgroundColor: 'blue25',
  isLarge: true,
  isCentered: true,
  isSmall: false,
};
