import docs from "./pn-stats-info-docs.json";

export default {
  title: 'Components/Data Visualization/Stats Info',
  parameters: {
    notes: docs,
    layout: 'fullscreen',
  },
};

const ForComboBlockTemplate = ({ ...args }) => {
  return `
  <div style="height:1200px" class="comboquotestatsblock">
  <h1 style="text-align:center;">Scroll Down...</h1>
  </div>
  <div style="background-color:#0D234B;">
    <div style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="${args.backgroundUrl}">
        </pn-stats-info>
    </div>
  </div>
    <br/>

    <div style="background-color:#0D234B;">
    <div style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}"  data-stats-image="background" background-url="${args.backgroundUrl}" >
        </pn-stats-info>
    </div>
    </div>
    `;
};

const StandaloneTemplateNoImage = ({ ...args }) => {
  return `
  <pn-breakpoints></pn-breakpoints>

    <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="none" data-stats-background-color="greenlightest">
        </pn-stats-info>
    </div>
    <br/>
    <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="none" data-stats-background-color="greendarkest">
        </pn-stats-info>
    </div>
<br/>
    <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="none" data-stats-background-color="bluedarkest">
        </pn-stats-info>
    </div>
    `;
};

const StandAloneCenterImageTemplate = ({ ...args }) => {
  return `
   <pn-breakpoints></pn-breakpoints>

    <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="image" data-stats-background-color="coral25">
        <div slot="illustration">
           <picture>
            <img src="https://com-inte.postnord.com/contentassets/8008a14914564b5c999d2cea4e151bdd/man-driving.jpg?width=690&height=388&mode=crop&quality=80&anchor=topcenter" />
           </picture>
        </div>
        </pn-stats-info>
    </div>

    <br/>

    <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="image" data-stats-background-color="blue400">
        <div slot="illustration">
           <picture>
            <img src="https://com-inte.postnord.com/contentassets/f302a64bf3b5496aaf6f49d8d47e834e/bcdda39b3033ad8b_org.jpg?width=540&height=304&mode=crop&quality=80&anchor=topcenter" />
           </picture>
        </div>
        </pn-stats-info>
    </div>
    `;
};

const StandAloneBackgroundImageTemplate = ({ ...args }) => {
  return `
  <pn-breakpoints></pn-breakpoints>
    <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="${args.backgroundUrl}">
        </pn-stats-info>
    </div>
    <br/>

    <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="https://com-inte.postnord.com/globalassets/illustrations/product-hero-illustrations--transparent-background/illu-computer-option.svg" data-stats-background-color="greenlightest">
        </pn-stats-info>
    </div>
    <br/>
     <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
        <pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="https://com-inte.postnord.com/contentassets/87e64ce0b9ce4acfafa0c26a1b11bd85/9b5aa1ae4698932c_org.png" data-stats-background-color="greendarkest">
        </pn-stats-info>
    </div>
  `;
};

export const Combo = ForComboBlockTemplate.bind({});
Combo.args = {
  heading: 'Postnord in figures 2022',
  backgroundUrl: 'https://com-inte.postnord.com/siteassets/map.png?width=1410&height=793&mode=crop&quality=80',
};

export const StandaloneNoImage = StandaloneTemplateNoImage.bind({});
StandaloneNoImage.args = {
  heading: 'Standalone Postnord in figures 2022',
};

export const StandAloneCenterImage = StandAloneCenterImageTemplate.bind({});
StandAloneCenterImage.args = {
  heading: 'Standalone Center Image',
};

export const StandAloneBackGroundImage = StandAloneBackgroundImageTemplate.bind({});
StandAloneBackGroundImage.args = {
  heading: 'Standalone BG Image 2023',
  backgroundUrl: 'https://com-inte.postnord.com/siteassets/map.png?width=1410&height=793&mode=crop&quality=80',
};
