{
  name: "Demo: Custom stage spacing",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    chromatic: {
      hideInChromatic: true,
      disableSnapshot: true
    },
    controls: {
      disabled: true
    }
  },
  render: () => {
    return html`
      <div style="border: 2px dashed lightgray; padding: 16px 0">
        <oc-cinema-v1>
          <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 2</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        </oc-cinema-v1>
      </div>

      <div style="display: flex; flex-direction: column; gap: 16px;  margin-top: 32px;">
        <div style="display: flex; gap: 16px; align-items: center;">
          <label for="stage-spacing-slider">Stage Spacing</label>
          <input
            type="range"
            name="stage-spacing-slider"
            id="stage-spacing-slider"
            min="0"
            max="64"
            value="16"
          />
          <span id="stage-spacing-slider-value">16px</span>
        </div>
      </div>

      <script>
        (() => {
          const cinema = document.querySelector("oc-cinema-v1");
          const stageSpacingSlider = document.getElementById("stage-spacing-slider");
          const stageSpacingSliderValue = document.getElementById("stage-spacing-slider-value");

          stageSpacingSlider.addEventListener("input", (event) => {
            const value = event.target.value + "px";
            cinema.style.setProperty("--stage-spacing", value);
            stageSpacingSliderValue.textContent = value;
          });
        })();
      </script>
    `;
  }
}

{
  name: "Demo: Move-Method",
  parameters: {
    chromatic: {
      hideInChromatic: true,
      disableSnapshot: true
    }
  },
  args: {
    defaultSlot: `<oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    `,
    "pagination-dots": true
  },
  render: ({
    defaultSlot,
    ...props
  }) => {
    return html`
      <!-- The component-->
      <oc-cinema-v1 ${spread(props)}>${unsafeHTML(defaultSlot)}</oc-cinema-v1>

      <br />
      <br />
      <p>
        <oc-button-v1 size="50"> Move stage to page 5 </oc-button-v1>
        <br />
        <br />
        <textarea
          style="width: 100%; height: 4rem; resize:none; font-family: Monospace; border:0;"
          aria-label="example"
          disabled
        >
        const moveMyCinema = (myCinema) => {
          myCinema.moveTo(5);
        }
        </textarea>
      </p>
      <br />
      <br />
      <p>
        <oc-button-v1 size="50"> Move stage to page 5 (reduced motion)</oc-button-v1>
        <br />
        <br />
        <textarea
          style="width: 100%; height: 4rem; resize:none; font-family: Monospace; border:0;"
          aria-label="example"
          disabled
        >
        const moveMyCinema = (myCinema) => {
          myCinema.moveTo(5, { reducedMotion: true });
        }
        </textarea>
      </p>

      <script>
        (() => {
          const [moveStage, moveStageReducedMotion] = document.getElementsByTagName("oc-button-v1");

          moveStage.addEventListener("click", () => {
            document.querySelector("oc-cinema-v1").moveTo(5);
          });

          moveStageReducedMotion.addEventListener("click", () => {
            document.querySelector("oc-cinema-v1").moveTo(5, { reducedMotion: true });
          });
        })();
      </script>
    `;
  }
}

{
  name: "Demo: Multiple Cinemas",
  parameters: {
    controls: {
      disabled: true
    },
    chromatic: {
      hideInChromatic: true,
      disableSnapshot: true
    }
  },
  render: () => {
    return html`
      <h1>List of Cinemas</h1>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>

      <oc-cinema-v1
        id="cinema-1"
        pagination-dots
        item-visibility-threshold="[0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]"
      >
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-cinema-v1>
      <div style="margin-top: 32px"></div>
      <oc-cinema-v1 id="cinema-2" pagination-dots item-visibility-threshold="[0.4, 0.8]">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-cinema-v1>
      <div style="margin-top: 32px"></div>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>

      <oc-cinema-v1 id="cinema-3" pagination-dots item-visibility-threshold="[0.3, 0.6, 0.9]">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-cinema-v1>
      <div style="margin-top: 32px"></div>
      <oc-cinema-v1 id="cinema-4" pagination-dots>
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-cinema-v1>
      <p>
        This cinema element has special tracking attributes (starting with <code>data-tr-v1</code>),
        which configure the tracking engine to observe the element by utilizing the provided
        threshold values. The element will be tracked when it becomes visible by at least 50% (as
        configured). And then tracking engin will first emit an event
        <code>tr-become-visible</code> containing the tracking trigger. and then if the event is not
        canceled, it will submit the default tracking method <code>submitMiniAction</code> to the
        tracking library (bct).
      </p>
      <p>
        you can make the submission visible in the console by enabling the tracking debug mode and
        providing a fake implementation (since bct is not enabled in storybook)
      </p>
      <pre><code>
        otto.tracking.submitMiniAction.assignFunction(console.log);
        o_global.debug.activate("nexus.otto.tracking", "debug");
      </code></pre>
      <oc-cinema-v1
        id="cinema-5"
        pagination-dots
        data-tr-v1
        data-tr-v1-tr-become-visible.observer='{ "threshold": 0.5 }'
        data-tr-v1-tr-become-visible.updates='[{ "featureId": "foo-barid", "status": "works" }]'
      >
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-cinema-v1>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <oc-cinema-v1 id="cinema-6" pagination-dots item-visibility-threshold="[0.5]">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-cinema-v1>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
    `;
  }
}

{
  name: "Demo: Device Type Detection",
  parameters: {
    controls: {
      disabled: true
    },
    chromatic: {
      hideInChromatic: true,
      disableSnapshot: true
    }
  },
  render: () => {
    const pt = pointerType.get();
    let deviceType: string;
    if (pt.isHybrid) {
      deviceType = "Hybrid (touch + pointer)";
    } else if (pt.isTouchable) {
      deviceType = "Touch only";
    } else {
      deviceType = "Mouse / Desktop";
    }
    return html`
      <p>
        <strong>Detected device type:</strong> ${deviceType}<br />
        <code
          >isTouchable: ${pt.isTouchable} · isHybrid: ${pt.isHybrid} · isMouse: ${pt.isMouse}</code
        >
      </p>
      <p>
        On <strong>touch-only</strong> devices, navigation arrows are hidden (users swipe
        natively).<br />
        On <strong>hybrid</strong> and <strong>desktop/mouse</strong> devices, navigation arrows are
        visible.
      </p>
      <oc-cinema-v1 pagination-dots>
        ${unsafeHTML(Array.from(Array(8), (_, i) => `<oc-placeholder-v1 interactive="true" style="width: 205px">ITEM ${i + 1}</oc-placeholder-v1>`).join(""))}
      </oc-cinema-v1>
    `;
  }
}

{
  args: {
    "pagination-dots": true,
    defaultSlot: `${new Array(6).fill(`<div tabindex="0" style="background: lightcyan">
              Content
            </div>
          `).join("")}`
  },
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  render(args) {
    const {
      defaultSlot,
      ...props
    } = args;
    return html` <oc-cinema-v1 style="width: 800px" ${spread(props)}>
      ${unsafeHTML(defaultSlot)}
    </oc-cinema-v1>`;
  },
  play: async ({
    canvasElement
  }) => {
    await macrotasks(10);
    const {
      paginationDots,
      stageElement,
      prevButton,
      nextButton
    } = getSutElements(canvasElement);
    await waitFor("initial", async () => {
      await expect(stageElement.scrollLeft, "scrollLeft should be correct").toBe(0);
      await expect(prevButton, "previous button should not be visible").not.toBeVisible();
      await expect(nextButton, "next button should be visible").toBeVisible();
      await expect(toVisibleArray(paginationDots), "pagination dots should be correct").toEqual([1, 0, 0]);
    });

    // Perform scroll to the right
    await click(nextButton);
    await waitFor("scrolled to right", async () => {
      await expect(prevButton, "previous button should be visible").toBeVisible();
      await expect(nextButton, "next button should be visible").toBeVisible();
      await expect(toVisibleArray(paginationDots), "pagination dots should be correct").toEqual([0, 1, 0]);
    });

    // Perform scroll to the right
    await click(nextButton);
    await waitFor("scrolled to right", async () => {
      await expect(prevButton, "previous button should be visible").toBeVisible();
      await expect(nextButton, "next button should not be visible").not.toBeVisible();
      await expect(toVisibleArray(paginationDots), "pagination dots should be correct").toEqual([0, 0, 1]);
    });

    // Perform scroll to the left
    await click(prevButton);
    await waitFor("scrolled to left", async () => {
      await expect(prevButton, "previous button should be visible").toBeVisible();
      await expect(nextButton, "next button should be visible").toBeVisible();
      await expect(toVisibleArray(paginationDots), "pagination dots should be correct").toEqual([0, 1, 0]);
    });

    // Perform scroll to the left
    await click(prevButton);
    await waitFor("scrolled to left", async () => {
      await expect(prevButton, "previous button should not be visible").not.toBeVisible();
      await expect(nextButton, "next button should be visible").toBeVisible();
      await expect(toVisibleArray(paginationDots), "pagination dots should be correct").toEqual([1, 0, 0]);
    });
  }
}

MoveCinemaWithoutResizingStories.MoveCinemaWithoutResizing

{
  render() {
    return html` <oc-cinema-v1 pagination-dots style="width: 500px"></oc-cinema-v1>`;
  },
  play: async ({
    canvasElement
  }) => {
    await macrotasks(10);
    const {
      cinemaElement
    } = getSutElements(canvasElement);
    const item = document.createElement("div");
    item.innerHTML = "Content";
    item.tabIndex = 0;
    const items = Array.from({
      length: 20
    }).map(() => item.cloneNode(true) as HTMLElement);

    // eslint-disable-next-line no-restricted-syntax
    for (const i of items) {
      cinemaElement.append(i);
      // eslint-disable-next-line no-await-in-loop
      await macrotasks(1);
    }
    const paginationDots = Array.from(cinemaElement.shadowRoot!.querySelectorAll(".paginationdots__item"));
    await expect(paginationDots.length, "pagination dots should be rendered").toBe(20);
    await expect(paginationDots[0].classList.contains("paginationdots__item--selected"), "first pagination dot should be selected").toBeTruthy();
    await expect(paginationDots.slice(1).some(e => e.classList.contains("paginationdots__item--selected")), "other pagination dots should not be selected").toBeFalsy();
  }
}

{
  render() {
    const items = (widthes: number[]) => {
      return widthes.map((w, i) => html`<div tabindex="0" style="background: lightcyan; width: ${w}px">
            ${i + 1}. ${w}px
          </div>`);
    };
    return html`
      <div data-testid="cinema1">
        <h3>Gap=default</h3>
        <oc-cinema-v1 pagination-dots style="width: 500px" resizing="none">
          ${items([124, 157, 131, 219, 84, 92, 317, 160, 142])}
        </oc-cinema-v1>
      </div>

      <div data-testid="cinema2">
        <h3>Gap=50px perfect fit 3 items</h3>
        <oc-cinema-v1 pagination-dots style="width: 466px" resizing="none" gap="50px">
          ${items([100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100])}
        </oc-cinema-v1>
      </div>

      <div data-testid="cinema3">
        <h3>Gap=50px perfect fit 1 item</h3>
        <oc-cinema-v1 pagination-dots style="width: 466px" resizing="none" gap="50px">
          ${items([400, 400, 400])}
        </oc-cinema-v1>
      </div>

      <style>
        div > oc-cinema-v1 {
          background: lightcoral;
        }
      </style>
    `;
  },
  play: async ({
    canvasElement
  }) => {
    await macrotasks(10);
    const sut1 = getSutElements(canvasElement.querySelector('[data-testid="cinema1"]')!);
    sut1.prevButton.style.display = "none"; // hide buttons for better debugging
    sut1.nextButton.style.display = "none"; // hide buttons for better debugging

    const sut2 = getSutElements(canvasElement.querySelector('[data-testid="cinema2"]')!);
    sut2.prevButton.style.display = "none"; // hide buttons for better debugging
    sut2.nextButton.style.display = "none"; // hide buttons for better debugging

    const sut3 = getSutElements(canvasElement.querySelector('[data-testid="cinema3"]')!);
    sut3.prevButton.style.display = "none"; // hide buttons for better debugging
    sut3.nextButton.style.display = "none"; // hide buttons for better debugging

    // TEST CINEMA 1
    await expect(sut1.paginationDots.length).toBe(4);
    await expect(sut1.stageElement.scrollLeft).toBe(0);
    await click(sut1.paginationDots[1]);
    await waitFor("cinema 1 page 2", async () => {
      await expect(sut1.stageElement.scrollLeft).toBeGreaterThanOrEqual(439);
      await expect(sut1.stageElement.scrollLeft).toBeLessThanOrEqual(440);
    });
    await click(sut1.paginationDots[2]);
    await waitFor("cinema 1 page 3", async () => {
      await expect(sut1.stageElement.scrollLeft).toBeGreaterThanOrEqual(827);
      await expect(sut1.stageElement.scrollLeft).toBeLessThanOrEqual(828);
    });
    await click(sut1.paginationDots[3]);
    await waitFor("cinema 1 page 4", async () => {
      await expect(sut1.stageElement.scrollLeft === 1086 || sut1.stageElement.scrollLeft === 1070).toBeTruthy();
    });

    // TEST CINEMA 2
    await expect(sut2.paginationDots.length).toBe(6);
    await expect(sut2.stageElement.scrollLeft).toBe(0);
    await click(sut2.paginationDots[1]);
    await waitFor("cinema 2 page 2", async () => {
      await expect([416, 433].includes(sut2.stageElement.scrollLeft)).toBeTruthy();
    });
    await click(sut2.paginationDots[2]);
    await waitFor("cinema 2 page 3", async () => {
      await expect(sut2.stageElement.scrollLeft).toBe(883);
    });
    await click(sut2.paginationDots[3]);
    await waitFor("cinema 2 page 4", async () => {
      await expect(sut2.stageElement.scrollLeft).toBe(1333);
    });

    // TEST CINEMA 3
    await expect(sut3.paginationDots.length).toBe(3);
    await expect(sut3.stageElement.scrollLeft).toBe(0);
    await click(sut3.paginationDots[1]);
    await waitFor("cinema 3 page 2", async () => {
      await expect(sut3.stageElement.scrollLeft).toBe(433);
    });
    await click(sut3.paginationDots[2]);
    await waitFor("cinema 3 page 3", async () => {
      await expect([850, 866].includes(sut3.stageElement.scrollLeft)).toBeTruthy();
    });
  }
}