import docs from "./pn-marketweb-sitefooter-docs.json";

export default {
  title: 'Components/Layout/Market web site Footer',
  parameters: {
    notes: docs,
    layout: 'fullscreen',
  },
  argTypes: {
    market: {
      values: [
        { name: 'Sweden', value: 'se' },
        { name: 'Denmark', value: 'dk' },
        { name: 'Finland', value: 'fi' },
        { name: 'Norway', value: 'no' },
        { name: 'Corporate', value: 'com' },
        { name: 'TPL', value: 'tpl' },
      ],
    },
    language: {
      values: [
        { name: 'English', value: 'en' },
        { name: 'Swedish', value: 'sv' },
        { name: 'Danish', value: 'da' },
        { name: 'Finnish', value: 'fi' },
        { name: 'Norwegian', value: 'no' },
      ],
    },
    endpoint: {
      values: [
        { name: 'Localhost', value: 'https://localhost:51547' },
        { name: 'local.postnord.com', value: 'https://local.postnord.com' },
        { name: 'Integration', value: 'https://com-inte.postnord.com' },
        { name: 'Preproduction', value: 'https://com-prep.postnord.com' },
        { name: 'Production', value: 'https://com-prod.postnord.com' },
        { name: 'Live', value: 'https://www.postnord.com' },
      ],
    },
    headinglevels: {
      control: "select",
      options: [
        "h1",
        "h2",
        "h3",
        "h4",
        "h5"
      ]
    },
  },
};

const Template = ({ ...args }) => {
  return `<pn-marketweb-sitefooter
  market="${args.market}"
  language="${args.language}"
  endpoint="${args.endpoint}"
  environment="${args.environment}"
  heading-level="${args.headinglevels}"
  site-domain-in-urls="true"
  >
</pn-marketweb-sitefooter>`;
};

export const Primary = Template.bind({});
Primary.args = {
  market: 'se',
  language: 'sv',
  endpoint: 'https://localhost:51547/',
  headinglevels: 'h2',
  // market : "tpl",
  // language: 'sv',
  // environment: "production",
  // endpoint: "",// 'https://www.postnord.se'
};

const CustomLogoTemplate = ({ ...args }) => {
  return `
  <pn-marketweb-sitefooter language="sv">
  <div slot="logo">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.73 41.74" width="12.7rem" height="3.7rem" >
      <g fill="#00a0d6">
          <path d="M108.84 13.35c0 6.34-5.17 9-10.03 9s-9.82-2.6-9.82-8.73 5.08-9 10.03-9 9.82 2.63 9.82 8.73Zm-6.56.18c0-2.09-1.36-3.51-3.38-3.51s-3.42 1.42-3.42 3.51c0 1.96 1.39 3.41 3.42 3.41s3.38-1.45 3.38-3.41Zm-82.97 0c0 4.83-3.32 8.82-8.49 8.82-3.17 0-4.65-1.57-4.65-1.57v5.86H0V5.17h6.17V6.8s1.6-2.18 5.11-2.18c5.14 0 8.04 3.96 8.04 8.91Zm-6.53 0c0-2.09-1.36-3.51-3.38-3.51s-3.42 1.42-3.42 3.51c0 1.96 1.39 3.41 3.42 3.41s3.38-1.45 3.38-3.41Zm103.69.27c0-2.54 1.54-3.32 3.6-3.32 1.27 0 2.08.3 2.08.3l.15-5.68s-.39-.18-1.45-.18c-3.45 0-4.38 2.18-4.38 2.18V5.17h-6.17v16.67h6.17v-8.03ZM141.73 0v21.84h-6.16v-1.63s-1.6 2.18-5.11 2.18c-5.14 0-8.04-3.96-8.04-8.91s3.32-8.82 8.49-8.82c3.17 0 4.65 1.57 4.65 1.57V1.21L141.72 0Zm-5.98 13.48c0-1.96-1.39-3.41-3.41-3.41s-3.38 1.45-3.38 3.41c0 2.08 1.36 3.5 3.38 3.5s3.41-1.42 3.41-3.5Zm-54.4-8.86c-3.6 0-4.9 2.18-4.9 2.18V5.17h-6.16v16.67h6.16v-8.55c0-2.11.79-3.08 2.69-3.08s2.18 1.57 2.18 3.57v8.07h6.22V11.6c0-4.59-2.2-6.98-6.19-6.98Zm-17.29-3.2H57.9v20.42h6.16V10.36h2.9l2.81-5.2h-5.71V1.42Zm-13.81 9.79c-2-.3-2.87-.3-2.87-1.09 0-.66.81-.94 2.42-.94 2.72 0 5.11.91 5.11.91L56 5.41s-2.63-.75-6.13-.75c-5.89 0-8.98 2.27-8.98 5.89 0 2.81 1.66 4.47 6.53 5.11 2.06.27 2.81.39 2.81 1.15s-.82.97-2.24.97c-3.08 0-5.98-1.3-5.98-1.3l-1.24 4.83s2.9 1.03 6.68 1.03c6.35 0 9.28-2.24 9.28-5.89 0-2.9-1.57-4.47-6.47-5.23Zm-10.06 2.14c0 6.34-5.17 9-10.03 9s-9.82-2.6-9.82-8.73 5.08-9 10.03-9 9.82 2.63 9.82 8.73Zm-6.56.18c0-2.09-1.36-3.51-3.38-3.51s-3.41 1.42-3.41 3.51c0 1.96 1.39 3.41 3.41 3.41s3.38-1.45 3.38-3.41ZM113.7 41.74V30.53h-3.63v-2.09h10.24v2.09h-3.65v11.21h-2.96ZM121.94 28.44h4.41c3.36 0 5.28 1.33 5.28 4.24s-1.94 4.25-5.36 4.25h-1.37v4.81h-2.96v-13.3Zm2.96 6.5h1.37c1.8 0 2.37-.82 2.37-2.22s-.49-2.15-2.37-2.15h-1.37v4.37ZM133.27 41.74v-13.3h2.96v11.21h5.49v2.09h-8.45Z"></path>
      </g>
  </svg>
  </div>
  </pn-marketweb-sitefooter>
`;
};

export const CustomLogo = CustomLogoTemplate.bind({});

const MinimalOptionsTemplate = ({ ...args }) => {
  return `
  <pn-marketweb-sitefooter language="sv">
  </pn-marketweb-sitefooter>
`;
};

export const MinimalOptions = MinimalOptionsTemplate.bind({});
MinimalOptionsTemplate.args = {};

const CustomSocialMediaTemplate = ({ ...args }) => {
  return `
  <pn-marketweb-sitefooter language="sv">
    <div slot="bottomsocialmediadesktop">
      <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
      <div class="trustpilot-widget" data-locale="sv-SE" data-template-id="53aa8807dec7e10d38f59f32" data-businessunit-id="5ea5ecf38e73e600018e171a" data-style-height="100px" data-style-width="60%" data-theme="light" data-text-color="#2D2013">
        <a href="https://se.trustpilot.com/review/postnord.se" target="_blank" rel="noopener">Trustpilot</a>
      </div>
    </div>
    <div slot="bottomsocialmediamobile">
      <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
      <div class="trustpilot-widget" data-locale="sv-SE" data-template-id="5419b637fa0340045cd0c936" data-businessunit-id="5ea5ecf38e73e600018e171a" data-style-height="20px" data-style-width="60%" data-theme="light">
        <a href="https://se.trustpilot.com/review/postnord.se" target="_blank" rel="noopener">Trustpilot</a>
      </div>
    </div>
  </pn-marketweb-sitefooter>
`;
};

export const CustomSocialMedia = CustomSocialMediaTemplate.bind({});
CustomSocialMediaTemplate.args = {};

const TemplateDotCom = ({ ...args }) => {
  return `
    <pn-marketweb-sitefooter
      market="${args.market}"
      language="${args.language}"
      endpoint="${args.endpoint}"
      environment="${args.environment}"
      heading-level="h2"
      backgroundcolor="darkestblue"
      site-domain-in-urls="true"
      theme="dotcom"
    >
    </pn-marketweb-sitefooter>
 `;
};

export const DotCom = TemplateDotCom.bind({});
DotCom.args = {
  market: 'com',
  language: 'en',
  endpoint: 'https://com-inte.postnord.com',
};

const TemplateGrayDotCom = ({ ...args }) => {
  return `
    <pn-marketweb-sitefooter
      market="${args.market}"
      language="${args.language}"
      endpoint="${args.endpoint}"
      environment="${args.environment}"
      backgroundcolor="gray"
      site-domain-in-urls="true"
      theme="dotcom"
    >
    <div slot="middle-extra">
      <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
      <div class="trustpilot-widget" data-locale="sv-SE" data-template-id="5419b637fa0340045cd0c936" data-businessunit-id="5ea5ecf38e73e600018e171a" data-style-height="20px" data-style-width="60%" data-theme="light">
        <a href="https://se.trustpilot.com/review/postnord.se" target="_blank" rel="noopener">Trustpilot</a>
      </div>
    </div>
    <div slot="middle-extra-mobile">
      <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
      <div class="trustpilot-widget" data-locale="sv-SE" data-template-id="5419b637fa0340045cd0c936" data-businessunit-id="5ea5ecf38e73e600018e171a" data-style-height="20px" data-style-width="60%" data-theme="light">
        <a href="https://se.trustpilot.com/review/postnord.se" target="_blank" rel="noopener">Trustpilot</a>
      </div>
    </div>
    </pn-marketweb-sitefooter>
 `;
};

export const GrayDotCom = TemplateGrayDotCom.bind({});
GrayDotCom.args = {
  market: 'se',
  language: 'sv',
  endpoint: 'https://localhost:51547/',
};

const TemplateGrayDotComSwan = ({ ...args }) => {
  return `
    <pn-marketweb-sitefooter
      market="${args.market}"
      language="${args.language}"
      endpoint="${args.endpoint}"
      environment="${args.environment}"
      backgroundcolor="blue"
      site-domain-in-urls="true"
      theme="dotcom"
      show-swan="${args.showSwan}
    >
     <div slot="middle-extra">
      <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
      <div class="trustpilot-widget" data-locale="sv-SE" data-template-id="5419b637fa0340045cd0c936" data-businessunit-id="5ea5ecf38e73e600018e171a" data-style-height="20px" data-style-width="60%" data-theme="light">
        <a href="https://se.trustpilot.com/review/postnord.se" target="_blank" rel="noopener">Trustpilot</a>
      </div>
    </div>
    <div slot="middle-extra-mobile">
      <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
      <div class="trustpilot-widget" data-locale="sv-SE" data-template-id="5419b637fa0340045cd0c936" data-businessunit-id="5ea5ecf38e73e600018e171a" data-style-height="20px" data-style-width="60%" data-theme="light">
        <a href="https://se.trustpilot.com/review/postnord.se" target="_blank" rel="noopener">Trustpilot</a>
      </div>
    </div>
    </pn-marketweb-sitefooter>
 `;
};

export const GrayDotComSwan = TemplateGrayDotComSwan.bind({});
GrayDotComSwan.args = {
  market: 'se',
  language: 'sv',
  endpoint: 'https://localhost:51547/',
  showSwan: true,
};

const TemplateTPL = ({ ...args }) => {
  return `
  <pn-marketweb-sitefooter
      market="${args.market}"
      language="${args.language}"
      theme="${args.market}"
      endpoint="${args.endpoint}">
  <div slot="logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.73 41.74" width="12.7rem" height="3.7rem" >
        <g fill="#00a0d6">
            <path d="M108.84 13.35c0 6.34-5.17 9-10.03 9s-9.82-2.6-9.82-8.73 5.08-9 10.03-9 9.82 2.63 9.82 8.73Zm-6.56.18c0-2.09-1.36-3.51-3.38-3.51s-3.42 1.42-3.42 3.51c0 1.96 1.39 3.41 3.42 3.41s3.38-1.45 3.38-3.41Zm-82.97 0c0 4.83-3.32 8.82-8.49 8.82-3.17 0-4.65-1.57-4.65-1.57v5.86H0V5.17h6.17V6.8s1.6-2.18 5.11-2.18c5.14 0 8.04 3.96 8.04 8.91Zm-6.53 0c0-2.09-1.36-3.51-3.38-3.51s-3.42 1.42-3.42 3.51c0 1.96 1.39 3.41 3.42 3.41s3.38-1.45 3.38-3.41Zm103.69.27c0-2.54 1.54-3.32 3.6-3.32 1.27 0 2.08.3 2.08.3l.15-5.68s-.39-.18-1.45-.18c-3.45 0-4.38 2.18-4.38 2.18V5.17h-6.17v16.67h6.17v-8.03ZM141.73 0v21.84h-6.16v-1.63s-1.6 2.18-5.11 2.18c-5.14 0-8.04-3.96-8.04-8.91s3.32-8.82 8.49-8.82c3.17 0 4.65 1.57 4.65 1.57V1.21L141.72 0Zm-5.98 13.48c0-1.96-1.39-3.41-3.41-3.41s-3.38 1.45-3.38 3.41c0 2.08 1.36 3.5 3.38 3.5s3.41-1.42 3.41-3.5Zm-54.4-8.86c-3.6 0-4.9 2.18-4.9 2.18V5.17h-6.16v16.67h6.16v-8.55c0-2.11.79-3.08 2.69-3.08s2.18 1.57 2.18 3.57v8.07h6.22V11.6c0-4.59-2.2-6.98-6.19-6.98Zm-17.29-3.2H57.9v20.42h6.16V10.36h2.9l2.81-5.2h-5.71V1.42Zm-13.81 9.79c-2-.3-2.87-.3-2.87-1.09 0-.66.81-.94 2.42-.94 2.72 0 5.11.91 5.11.91L56 5.41s-2.63-.75-6.13-.75c-5.89 0-8.98 2.27-8.98 5.89 0 2.81 1.66 4.47 6.53 5.11 2.06.27 2.81.39 2.81 1.15s-.82.97-2.24.97c-3.08 0-5.98-1.3-5.98-1.3l-1.24 4.83s2.9 1.03 6.68 1.03c6.35 0 9.28-2.24 9.28-5.89 0-2.9-1.57-4.47-6.47-5.23Zm-10.06 2.14c0 6.34-5.17 9-10.03 9s-9.82-2.6-9.82-8.73 5.08-9 10.03-9 9.82 2.63 9.82 8.73Zm-6.56.18c0-2.09-1.36-3.51-3.38-3.51s-3.41 1.42-3.41 3.51c0 1.96 1.39 3.41 3.41 3.41s3.38-1.45 3.38-3.41ZM113.7 41.74V30.53h-3.63v-2.09h10.24v2.09h-3.65v11.21h-2.96ZM121.94 28.44h4.41c3.36 0 5.28 1.33 5.28 4.24s-1.94 4.25-5.36 4.25h-1.37v4.81h-2.96v-13.3Zm2.96 6.5h1.37c1.8 0 2.37-.82 2.37-2.22s-.49-2.15-2.37-2.15h-1.37v4.37ZM133.27 41.74v-13.3h2.96v11.21h5.49v2.09h-8.45Z"></path>
        </g>
    </svg>
  </div>
  </pn-marketweb-sitefooter>
`;
};

export const TPL = TemplateTPL.bind({});
TPL.args = {
  market: 'tpl',
  language: 'sv',
  endpoint: 'https://tpl-inte.postnord.com',
};
