import docs from "./pn-teaser-card-docs.json";
import { open_in_new, arrow_right } from 'pn-design-assets/pn-assets/icons';

export default {
  title: 'Components/Cards/Teaser Card',
  parameters: {
    notes: docs,
    layout: 'centered',
  },
};

const TemplateOneThird = ({ cards, ...args }) => {
  return `
  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
    <div class="onethirdwidth" style="width:33%; padding:16px 0;">
     <pn-teaser-card heading="${cards[0].heading}" heading-level="${cards[0].headingLevel}" text="${cards[0].text}" label="Hard Coded" data-card-color="coral" class=" teaser-card--hover-effect">
        <div slot="illustration">
        <picture>
          <img src="https://www.postnord.se/siteassets/1.-skicka/inspecting-containers-in-a-shipping-terminal-1.jpg" />
        </picture>
      </div>
        <a slot="cta"
           href="google.com"
           class="secondary-link--animated">
            ${cards[2].buttonLabel} <pn-icon icon='${arrow_right}'> </pn-icon>
        </a>
      </pn-teaser-card>
    </div>
    <div class="onethirdwidth" style="width:33%; padding:16px 0;">
      <pn-teaser-card heading="${cards[1].heading}" heading-level="${cards[1].headingLevel}" text="${cards[1].text}" data-card-color="white" class=" teaser-card--hover-effect">
        <div slot="illustration">
        <picture>
          <img src="https://www.postnord.se/siteassets/images-new/start-page/kvinna-hamtar-paket-ur-paketbox-3840x2140.jpg" />
        </picture>
      </div>

      </pn-teaser-card>
    </div>
    <div class="onethirdwidth" style="width:33%; padding:16px 0;">
      <pn-teaser-card heading="${cards[2].heading}" heading-level="${cards[2].headingLevel}" text="${cards[2].text}" data-card-color="blue900" class=" teaser-card--hover-effect">
        <div slot="illustration">
        <picture>
          <img src="https://www.postnord.se/siteassets/1.-skicka/inspecting-containers-in-a-shipping-terminal-1.jpg" />
        </picture>
      </div>
        <a slot="cta"
           target="_blank"
           href="google.com"
           class="secondary-link--animated">
            ${cards[2].buttonLabel} <pn-icon icon='${open_in_new}'> </pn-icon>
        </a>
      </pn-teaser-card>
    </div>
  </div>
  `;
};

const TemplateOneHalf = ({ cards, ...args }) => {
  return `
  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
    <div class="halfwidth" style="width:50%; padding:16px 0;">
    <pn-teaser-card heading="${cards[0].heading}" text="${cards[0].text}" data-card-color="green" class="teaser-card--hover-effect">
       <div slot="illustration">
        <picture>
          <img src="https://com-inte.postnord.com/contentassets/311478cdf1f44382a4a60592ec59980f/554a9f93-bba3-4ddb-a7f4-938cff502e5d.jpg?width=690&height=388&mode=crop&quality=80&anchor=topcenter" />
        </picture>
        </div>
      <a slot="cta"
           target="_blank"
           href="google.com"
           class="secondary-link--animated">
            ${cards[0].buttonLabel} <pn-icon icon='${open_in_new}'> </pn-icon>
        </a>
    </pn-teaser-card>
    </div>

    <div class="halfwidth" style="width:50%; padding:16px 0;">
      <pn-teaser-card heading="${cards[1].heading}" text="${cards[1].text}" data-card-color="coral" class="teaser-card--hover-effect">
        <div slot="illustration">
        <picture>
          <img src="https://com-inte.postnord.com/contentassets/311478cdf1f44382a4a60592ec59980f/554a9f93-bba3-4ddb-a7f4-938cff502e5d.jpg?width=690&height=388&mode=crop&quality=80&anchor=topcenter" />
        </picture>
        </div>
        <a slot="cta"
           target="_blank"
           href="google.com"
           class="secondary-link--animated">
            ${cards[1].buttonLabel} <pn-icon icon='${open_in_new}'> </pn-icon>
        </a>
      </pn-teaser-card>
    </div>
  </div>
  `;
};

const TemplateFullWidth = ({ cards, ...args }) => {
  return `
  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
    <div class="fullwidth" style="width:100%; padding:16px 0;">
    <pn-teaser-card heading="${cards[0].heading}" text="${cards[0].text}" label="${cards[0].label}" data-card-color="green" data-card-alignment="left">
      <div slot="illustration">
        <picture>
          <img src="https://www.postnord.se/siteassets/startpage-blocks/woman-with-parcel.png" />
        </picture>
      </div>
    </pn-teaser-card>
    </div>
  </div>

  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
    <div class="fullwidth" style="width:100%; padding:16px 0;">
      <pn-teaser-card heading="${cards[1].heading}" text="${cards[1].text}" label="${cards[1].label}"  data-card-color="coral" data-card-alignment="right" class=" teaser-card--hover-effect">
      <div slot="illustration">
        <picture>
          <img src="https://www.postnord.se/siteassets/startpage-blocks/woman-with-parcel.png" />
        </picture>
      </div>
        <pn-button slot="cta">${cards[1].buttonLabel}</button>
      </pn-teaser-card>
    </div>
  </div>`;
};

const TemplateOneFourth = ({ cards, ...args }) => {
  return `
  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
  <div class="onequarterwidth" style="width:33%; padding:16px 0;">
     <pn-teaser-card heading="${cards[0].heading}" text="${cards[0].text}" label="Hard Coded" data-card-color="coral" class=" teaser-card--hover-effect">

        <a slot="cta"
           href="google.com"
           class="secondary-link--animated">
            ${cards[0].buttonLabel} <pn-icon icon='${arrow_right}'> </pn-icon>
        </a>
      </pn-teaser-card>
    </div>
    <div class="onequarterwidth" style="width:33%; padding:16px 0;">
     <pn-teaser-card heading="${cards[1].heading}" text="${cards[1].text}" label="Hard Coded" data-card-color="blue" class=" teaser-card--hover-effect">
        <div slot="illustration">
        <picture>
          <img src="https://www.postnord.se/siteassets/1.-skicka/inspecting-containers-in-a-shipping-terminal-1.jpg" />
        </picture>
      </div>
        <a slot="cta"
           href="google.com"
           class="secondary-link--animated">
            ${cards[1].buttonLabel} <pn-icon icon='${arrow_right}'> </pn-icon>
        </a>
      </pn-teaser-card>
    </div>
    <div class="onequarterwidth" style="width:33%; padding:16px 0;">
      <pn-teaser-card heading="${cards[2].heading}" text="${cards[2].text}" data-card-color="white" class=" teaser-card--hover-effect">
        <div slot="illustration">
        <picture>
          <img src="https://www.postnord.se/siteassets/images-new/start-page/kvinna-hamtar-paket-ur-paketbox-3840x2140.jpg" />
        </picture>
      </div>

      </pn-teaser-card>
    </div>
    <div class="onequarterwidth" style="width:33%; padding:16px 0;">
      <pn-teaser-card heading="${cards[3].heading}" text="${cards[3].text}" data-card-color="green" class=" teaser-card--hover-effect">
        <div slot="illustration">
        <picture>
          <img src="https://www.postnord.se/siteassets/1.-skicka/inspecting-containers-in-a-shipping-terminal-1.jpg" />
        </picture>
      </div>
        <a slot="cta"
           target="_blank"
           href="google.com"
           class="secondary-link--animated">
            ${cards[3].buttonLabel} <pn-icon icon='${open_in_new}'> </pn-icon>
        </a>
      </pn-teaser-card>
    </div>
  </div>
  `;
};

export const OneThird = TemplateOneThird.bind({});
export const Half = TemplateOneHalf.bind({});
export const FullWidth = TemplateFullWidth.bind({});
export const OneFourth = TemplateOneFourth.bind({});

OneThird.args = {
  cards: [
    {
      heading: 'E-commerce & Logistics',
      text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique',
      buttonLabel: 'Some button',
      headingLevel: 'h2',
    },
    {
      heading: 'Lorem ipsum dolor sit amet',
      text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique Pellentesque lectus orci',
      buttonLabel: 'Some button',
      headingLevel: 'h2',
    },
    {
      heading: 'Communications',
      text: 'Pellentesque lectus orci, ullamcorper a quam in eargareg aergarea aerg aergaeg a aer gaerg ',
      buttonLabel: 'Some button',
      headingLevel: 'h1',
    },
  ],
};

Half.args = {
  cards: [
    {
      heading: 'Communications',
      text: 'Pellentesque lectus orci, ullamcorper a quam in eargareg aergarea aerg aergaeg a aer gaerg ',
      buttonLabel: 'Some button',
    },
    {
      heading: 'Green by PostNord -Sustainable logistics',
      text: 'PostNord is a leading provider of parcel and logistics services to, from, and within the Nordic region. We ensure that our business and non-business customers are able to communicate with their recipients reliably, efficiently and on time – regardless of whether this involves a global logistics solution, an ad campaign or birthday greetings.',
      buttonLabel: 'Learn more our customer value proposition',
    },
  ],
};

FullWidth.args = {
  cards: [
    {
      heading: '',
      text: 'No hover effect class added to wrapping div since we have no cta button / link',
      buttonLabel: 'More about our sustainability work',
      label: 'Consumption',
    },
    {
      heading: 'Communications',
      text: 'PostNord is a leading provider of parcel and logistics services to, from, and within the Nordic region. We ensure that our business and non-business customers are able to communicate with their recipients reliably, efficiently and on time – regardless of whether this involves a global logistics solution, an ad campaign or birthday greetings.',
      buttonLabel: 'Learn more our customer value proposition',
      label: 'Sustainability',
    },
  ],
};

OneFourth.args = {
  cards: [
    {
      heading: 'E-commerce & Logistics',
      text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique',
      buttonLabel: 'Some button',
    },
    {
      heading: 'Lorem ipsum dolor sit amet',
      text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique Pellentesque lectus orci',
      buttonLabel: 'Some button',
    },
    {
      heading: 'Communications',
      text: 'Pellentesque lectus orci, ullamcorper a quam in eargareg aergarea aerg aergaeg a aer gaerg ',
      buttonLabel: 'Some button',
    },
    {
      heading: 'E-commerce & Logistics',
      text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique',
      buttonLabel: 'Some button',
    },
  ],
};
