import { home, user, stamp, calendar, bullhorn, alert_info_circle } from 'pn-design-assets/pn-assets/icons';
import docs from "./pn-sidenav-docs.json";

export default {
  title: 'Components/Navigation/Side Navigation',
  parameters: {
    notes: docs,
  },
};

const Template = ({ ...args }) => {
  return `
  <div style="min-width:100%;min-height:100vh;background:#eee;padding:1em;">
    <pn-sidenav-togglebutton label="Toggle menu">Handla online</pn-sidenav-togglebutton>
    <div style="max-width:15em; background:#fff;">
      <pn-sidenav language="${args.language}">
      <div slot="above">Content above navigation</div>
        <pn-sidenav-level>
          <pn-sidenav-link name="Start" href="/" icon='${home}' ></pn-sidenav-link>
          <pn-sidenav-link name="Min översikt" icon='${user}' current="true">
            <pn-sidenav-level>
              <pn-sidenav-link name="Leveransadresser" href="/"></pn-sidenav-link>
              <pn-sidenav-link name="Mina beställningar" href="/"></pn-sidenav-link>
              <pn-sidenav-link name="Mina abonnemang" href="/"></pn-sidenav-link>
            </pn-sidenav-level>
          </pn-sidenav-link>
          <pn-sidenav-link name="Portoproduckter" href="/porto" icon='${stamp}' >
            <pn-sidenav-level>
              <pn-sidenav-link name="Frimärken" href="/frimarken"></pn-sidenav-link>
              <pn-sidenav-link name="Förpackningar" href="/Forpackningar"></pn-sidenav-link>
              <pn-sidenav-link name="Filateli" href="/filateli"></pn-sidenav-link>
              <pn-sidenav-link name="Postogram" href="/postogram"></pn-sidenav-link>
            </pn-sidenav-level>
          </pn-sidenav-link>
          <pn-sidenav-link name="Abonnemang" href="/" icon='${calendar}' ></pn-sidenav-link>
          <pn-sidenav-link name="Om frimärken" href="/" icon='${bullhorn}' ></pn-sidenav-link>
          <pn-sidenav-link name="Vanliga frågor" href="/" icon='${alert_info_circle}' ></pn-sidenav-link>
      </pn-sidenav-level>
      </pn-sidenav>
    </div>
  </div>
  `;
};

export const Primary = Template.bind({});
Primary.args = {
  market: 'se',
  language: 'sv',
};
