import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Carousel.svelte';
const meta = {
    title: 'Content/Carousel',
    component: 'm-carousel',
    tags: ['v2'],
    argTypes: {
        'aria-labelledby': {
            table: {
                disable: true,
            },
        },
    },
    args: {
        'aria-labelledby': 'defaultCarousel',
        header: '<h2 class="mc-carousel__title mt-title--m" id="defaultCarousel" slot="header">Title of the carousel</h2>',
        default: `
        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__1">
          <img class="free-content__image"
                src="https://picsum.photos/id/1/600/300" alt="card 1">
          <div id="free-content__1" class="free-content__title">my card1</div>
        </div>
        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__2">
          <img class="free-content__image"
                src="https://picsum.photos/id/12/600/300" alt="card 2">
          <div id="free-content__2" class="free-content__title">my card2</div>
        </div>
        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__3">
          <img class="free-content__image"
                src="https://picsum.photos/id/23/600/300" alt="card 3">
          <div id="free-content__3" class="free-content__title">my card3</div>
        </div>
        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__4">
          <img class="free-content__image"
                src="https://picsum.photos/id/34/600/300" alt="card 4">
          <div id="free-content__4" class="free-content__title">my card4</div>
        </div>
    `,
    },
    render: (args) => html `
    <m-carousel
      previousButtonAriaLabel=${ifDefined(args.previousButtonAriaLabel)}
      nextButtonAriaLabel=${ifDefined(args.nextButtonAriaLabel)}
    >
      ${unsafeHTML(ifDefined(args.header))} ${unsafeHTML(ifDefined(args.default))}
    </m-carousel>
  `,
};
export default meta;
export const Default = {};
export const Subtitle = {
    args: {
        'aria-labelledby': 'subtitleCarousel',
        header: `
      <h2 class="mc-carousel__title mt-title--m" id="subtitleCarousel" slot="header">Title of the carousel</h2>
      <p class="mc-carousel__sub-title mt-body-m" slot="header">Longer description of the carousel</p>
    `,
    },
};
export const Link = {
    args: {
        'aria-labelledby': 'linkCarousel',
        header: `
      <h2 class="mc-carousel__title mt-title--m" id="linkCarousel" slot="header">Title of the carousel</h2>
      <m-link href="#" iconposition="right" slot="header">
        Stand-alone link
        <ArrowNext24 slot="icon"/>
      </m-link>
    `,
    },
};
