import docs from "./pn-marketweb-siteheader-docs.json";
import { createDocumentation } from "../../../globals/documentation/story";
import { dashboard, open_in_new, shop, truck } from "pn-design-assets/pn-assets/icons";
const usertoken = '6ae6bde345eb68fc0102f4ba256f31e9151db31dc2ea4c23a51917c';
const { argTypes, textContent } = createDocumentation(docs);
const meta = {
    title: "Components/Layout/Market web site Header",
    parameters: {
        layout: "fullscreen",
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    args: {
        market: "se",
        language: "sv",
        siteid: "",
        hideSiteSelector: false,
        hideLanguageSelector: false,
        hideSearch: false,
        hideLogin: false,
        checkUserLoggedInStateInterval: 0,
        showUnifiedLogin: false,
        sessionForward: false,
        hideHomeMenuItem: false,
        cache: false,
        pageId: "",
        siteDomainInUrls: false,
    },
    argTypes: {
        market: {
            control: "select",
            options: ["se", "dk", "fi", "no", "com", "tpl"],
        },
        language: {
            control: "select",
            options: ["en", "sv", "da", "fi", "no", "zh", "it", "nl"],
        },
        endpoint: {
            control: "select",
            options: [
                "",
                "https://localhost:51547",
                "https://local.postnord.com",
                "https://se-inte.postnord.com",
                "https://se-prep.postnord.com",
                "https://se-prod.postnord.com",
                "https://com-inte.postnord.com",
                "https://com-prep.postnord.com",
                "https://com-prod.postnord.com",
                "https://www.postnord.com",
            ],
        },
    },
};
export default meta;
const shoppingCartContent = `
  <a href="" class="header-cart" slot="toprightend" style="align-self:center;position:relative;text-decoration:none;">
    <span>Varukorg</span>
    <pn-icon icon='${shop}' color="blue700" class="pn-icon"></pn-icon>
  </a>`;
const customLogoContent = `<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>`;
const renderSiteHeader = (args, htmlContent) => {
    const siteHeader = document.createElement('pn-marketweb-siteheader');
    Object.keys(args).forEach(key => args[key] && siteHeader.setAttribute(key, args[key]));
    siteHeader.innerHTML += htmlContent;
    return siteHeader;
};
export const Primary = {
    name: 'Primary',
    parameters: {
        docs: {
            description: {
                story: '',
            },
        },
    },
    render: args => renderSiteHeader(args, shoppingCartContent),
    args: {
        endpoint: 'https://localhost:51547',
    },
};
/** Old login dropdown. */
export const OldLoginDropdown = {
    name: 'Old login dropdown',
    render: Primary.render,
    args: {
        siteid: '06bb4e57-cf10-4374-9e4d-34ae987eff2e',
        pageId: '9',
    },
};
/** Use your own custom logo */
export const CustomLogo = {
    name: 'Custom logo',
    render: args => renderSiteHeader(args, customLogoContent),
};
/** Use different environments. */
export const EnvironmentOptions = {
    name: 'Environment options',
    render: Primary.render,
    args: {
        environment: 'integration',
    },
};
/** Spa */
export const SPAModeOptions = {
    name: 'SPAModeOptions',
    render: args => {
        const div = document.createElement('div');
        const header = renderSiteHeader(args, shoppingCartContent);
        div.appendChild(header);
        div.innerHTML += `
    <link rel="alternate" hreflang="en-us" href="https://postnord--hcdk.sandbox.my.site.com/dkprivate/s/?language=en_US" data-owner="setSEOProperties">
    <link rel="alternate" hreflang="da" href="https://postnord--hcdk.sandbox.my.site.com/dkprivate/s/?language=da" data-owner="setSEOProperties">
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        if (!window["haslangchange"]) {
          console.log('SPA Mode - attached global market web header language change eventlistener')

          window.addEventListener('marketweb-languagechange', (e) => {
            console.log('marketweb-languagechange e', e)
          });
          window["haslangchange"] = true;
        }
      });
    </script>
    `;
        return div;
    },
    args: {
        environment: 'integration',
        endpoint: 'https://localhost:51547/',
        siteDomainInUrls: true,
        pageId: '9',
    }
};
/** Use localhost. */
export const LocalhostOptions = {
    name: 'Environment options',
    render: Primary.render,
    args: {
        endpoint: 'https://localhost:51547/',
    },
};
const LoggedInTemplate = ({ ...args }) => {
    return `
  <div style="background:#ddd;min-height:100vh;">
  <pn-marketweb-siteheader
    market="${args.market}"
    language="${args.language}"
    endpoint="${args.endpoint}"
    user-token="${args.token}"
    check-user-logged-in-state-interval="${args.checkUserLoggedInStateInterval + ''}"
  >
  </pn-marketweb-siteheader>
</div>
`;
};
export const LoggedIn = LoggedInTemplate.bind({});
LoggedIn.args = {
    market: 'se',
    language: 'sv',
    endpoint: 'https://com-inte.postnord.com',
    //endpoint: 'https://localhost:51547',
    token: usertoken,
};
const MarketWebLoginLogicLoginTestWithoutProp = () => {
    return `
  <header>
  <pn-marketweb-siteheader
  endpoint="https://com-inte.postnord.com"
  hide-search=""
  spa-mode="true"
  market="se"
  language="sv"
  environment="inte"
  site-domain-in-urls="true"
  hide-site-selector="false" 
  show-unified-login="true">
  </pn-marketweb-siteheader>
  </header>`;
};
export const MarketWebLoginLogicTestwithoutprop = MarketWebLoginLogicLoginTestWithoutProp.bind({});
const MarketWebLoginLogicLoginAsTrue = () => {
    return `
  <header>
  <pn-marketweb-siteheader
  endpoint="https://com-inte.postnord.com"
  hide-search=""
  spa-mode="true"
  market="se"
  language="sv"
  environment="inte"
  site-domain-in-urls="true"
  hide-site-selector="false" 
  show-unified-login="true"
  use-Marketweb-Login="true">
  </pn-marketweb-siteheader>
  </header>`;
};
export const MarketWebLoginLogicAsTrue = MarketWebLoginLogicLoginAsTrue.bind({});
const MarketWebLoginLogicLoginAsFalse = () => {
    return `
  <header>
  <pn-marketweb-siteheader
  endpoint="https://com-inte.postnord.com"
  hide-search=""
  spa-mode="true"
  market="se"
  language="sv"
  environment="inte"
  site-domain-in-urls="true"
  hide-site-selector="false" 
  show-unified-login="true"
  use-Marketweb-Login="false">
  </pn-marketweb-siteheader>
  </header>`;
};
export const MarketWebLoginLogicForTestEnv = MarketWebLoginLogicLoginAsFalse.bind({});
const MarketWebLoginLogicLoginAsFalseAndProd = () => {
    return `
  <header>
  <pn-marketweb-siteheader
  endpoint="https://com-inte.postnord.com"
  hide-search=""
  spa-mode="true"
  market="se"
  language="sv"
  environment="production"
  site-domain-in-urls="true"
  hide-site-selector="false" 
  show-unified-login="true"
  use-Marketweb-Login="false">
  </pn-marketweb-siteheader>
  </header>`;
};
export const MarketWebLoginLogicForProdEnv = MarketWebLoginLogicLoginAsFalseAndProd.bind({});
export const LoggedInWithStatusCheck = LoggedInTemplate.bind({});
LoggedInWithStatusCheck.args = {
    market: 'se',
    language: 'sv',
    endpoint: 'https://com-inte.postnord.com',
    checkUserLoggedInStateInterval: 10000,
    //endpoint: 'https://localhost:51547',
    token: usertoken,
};
const LoggedInProfileSelectionTemplate = ({ ...args }) => {
    return `
  <div style="background:#ddd;min-height:100vh;">
  <pn-marketweb-siteheader
    market="${args.market}"
    language="${args.language}"
    endpoint="${args.endpoint}"
    user-token="${args.token}"
    check-user-logged-in-state-interval="10000"
    show-profile-selection="true"
  >
  </pn-marketweb-siteheader>
</div>
`;
};
export const LoggedInProfileSelection = LoggedInProfileSelectionTemplate.bind({});
LoggedInProfileSelection.args = {
    market: 'se',
    language: 'sv',
    // endpoint: 'https://com-inte.postnord.com',
    endpoint: 'https://localhost:51547/',
    token: usertoken,
};
const BusinessUserLoggedInTemplate = ({ ...args }) => {
    return `
  <div style="background:#ddd;min-height:100vh;">
  <pn-marketweb-siteheader
    market="${args.market}"
    language="${args.language}"
    endpoint="${args.endpoint}"
    user-fullname="${args.name}"
    user-loggedin="${args.loggedin}"
  >
  </pn-marketweb-siteheader>
</div>
`;
};
export const BusinessUserLoggedIn = BusinessUserLoggedInTemplate.bind({});
BusinessUserLoggedIn.args = {
    market: 'com',
    language: 'zh',
    endpoint: 'https://com-inte.postnord.com',
    name: 'custom user name',
    loggedin: true,
};
const DotComSiteHeaderTemplate = ({ ...args }) => {
    return `
  <div class="header-wrapper" data-header-theme="dotcom">
    <pn-marketweb-siteheader
    market="${args.market}"
    language="${args.language}"
    endpoint="${args.endpoint}"
    user-fullname="${args.name}"
    user-loggedin="${args.loggedin}"
    show-unified-login=${args.unified}
    show-profile-selection=${args.showProfileSelection}
    >
      <pn-button slot="toprightend" href="http:www.google.se" small="true">Get started</pn-button>
      <pn-button slot="menu-footer-cta" href="http:www.google.se" small="true">Get started</pn-button>
    </pn-marketweb-siteheader>
  </div>`;
};
export const DotComSiteHeader = DotComSiteHeaderTemplate.bind({});
DotComSiteHeader.args = {
    market: 'com',
    language: 'it',
    endpoint: 'https://com-inte.postnord.com',
    name: 'DotCom User',
    loggedin: true,
    loginInfo: encodeURIComponent('Hello i am a <a href="#">link!</a>'),
    unified: true,
    showProfileSelection: false,
};
const TPLSiteHeaderTemplate = ({ ...args }) => {
    return `
  <div class="header-wrapper" data-header-theme="tpl">
    <pn-marketweb-siteheader
    market="${args.market}"
    language="${args.language}"
    endpoint="${args.endpoint}"
    user-fullname="${args.name}"
    user-loggedin="${args.loggedin}"
    hide-language-selector="${args.hideLanguageSelector}"
    hide-login="${args.hideLogin}"
    search-placeholder="${args.placeholder}"
    hide-home-menu-item="${args.hideHomeMenuItem}">
      <div slot="header-bottom-button">
        <pn-button class="header-bottom-button--button" href="http:www.google.se">${args.buttonText}</pn-button>
        <pn-button class="header-bottom-button--button" href="http:www.google.se">Boka slottid</pn-button>
        <pn-button class="header-bottom-button--icon" href="http:www.google.se" icon-only="true" icon='${dashboard}' arialabel="${args.buttonText}" tooltip='${args.buttonText}'></pn-button>
        <pn-button class="header-bottom-button--icon" href="http:www.google.se" icon-only="true" icon='${truck}' arialabel="Boka slottid" tooltip='Boka slottid'></pn-button>
      </div>
      <pn-button slot="siteheader-menu-top-button" href="http:www.google.se" small="true" icon='${open_in_new}'>${args.buttonText}</pn-button>
      <div slot="menu-footer-cta">
        <pn-button href="http:www.google.se" small="true" icon='${open_in_new}'>${args.buttonText}</pn-button>
        <pn-button href="http:www.google.se" small="true" icon='${open_in_new}'>Boka slottid</pn-button>
      </div>
    </pn-marketweb-siteheader>
  </div>
  <style>
      .header-wrapper[data-header-theme=tpl]>pn-marketweb-siteheader [slot=header-bottom-button] a .pn-button-content pn-icon svg>path {
        fill: #0d234b;
    }
    .header-bottom-button--icon {
        display: none;
    }

    @media only screen and (min-width: 1024px) and (max-width: 1240px) {
        .header-bottom-button--button {
            display: none;
        }

        .header-bottom-button--icon {
            display: block;
        }
    }
  </style>
  `;
};
export const TPLSiteHeader = TPLSiteHeaderTemplate.bind({});
TPLSiteHeader.args = {
    market: 'se',
    language: 'sv',
    endpoint: 'https://tpl-inte.postnord.com',
    name: 'TPL User',
    hideLogin: true,
    hideHomeMenuItem: true,
    hideLanguageSelector: false,
    loggedin: false,
    buttonText: 'Kontrolltornet',
    placeholder: 'placeholder',
};
const ATLoginTestTemplate = () => {
    return `
  <script>
  window['pnTopbar'] = { session_id : 'b54237185e06db83b1d6467895ba774328d6d3a8dd6b22f7305af65' };
  </script>
  <header>
  <pn-marketweb-siteheader
  endpoint="https://com-inte.postnord.com"
  hide-search=""
  spa-mode="true"
  market="se"
  language="sv"
  login="https://atportal.postnord.com/api/unified-login/backend/authorization?redirectionUrl=https://atportal.postnord.com"
  environment="integration"
  site-domain-in-urls="true"
  hide-site-selector="false" >
    </pn-marketweb-siteheader>
  </header>`;
};
export const ATLoginTest = ATLoginTestTemplate.bind({});
const UnifiedLoginTemplate = ({ ...args }) => {
    return `
  <div style="background:#ddd;min-height:100vh;">
  <pn-marketweb-siteheader
    market="${args.market}"
    language="${args.language}"
    endpoint="${args.endpoint}"
    user-token="${args.token}"
    check-user-logged-in-state-interval="${args.checkUserLoggedInStateInterval + ''}"
    show-unified-login="${args.showUnifiedLogin}"
  >
  </pn-marketweb-siteheader>
</div>
`;
};
export const UnifiedLogin = UnifiedLoginTemplate.bind({});
UnifiedLogin.args = {
    market: 'se',
    language: 'sv',
    endpoint: 'https://com-inte.postnord.com',
    //endpoint: 'https://localhost:51547',
    token: usertoken,
};
const KopFraktTemplate = ({ ...args }) => {
    return `
  <pn-marketweb-siteheader
    language="${args.language}"
    market="${args.market}"
    environment="${args.environment}"
    endpoint="${args.endpoint}"
    hide-site-selector="${args.hideSiteSelector}"
    hide-search=""
    spa-mode="${args.spaMode}"
    hide-login="${args.hideLogin}"
    site-domain-in-urls="${args.siteDomainInUrls}"
    show-unified-login="${args.showUnifiedLogin}"
    use-Marketweb-Login="${args.useMarketWebLogin}"
    ></pn-marketweb-siteheader>
  `;
};
export const KopFrakt = KopFraktTemplate.bind({});
KopFrakt.args = {
    language: 'en',
    market: 'se',
    environment: 'integration',
    endpoint: 'https://com-inte.postnord.com',
    hideSiteSelector: false,
    hideSearch: '',
    spaMode: 'true',
    hideLogin: 'false',
    siteDomainInUrls: 'true',
    showUnifiedLogin: 'true'
};
//# sourceMappingURL=pn-marketweb-siteheader.stories.js.map
