import { lorem } from "@helpers/ui/lipsum";
import { html } from "lit";

import type { Meta, StoryObj } from "@storybook/web-components";

import { TemsViewport } from "@components/orbit/ui/tems-viewport";

import "@components/header/tems-header";
import "@components/shared/ui/tems-division";
import "@components/cards/tems-card-catalog";
import "@components/shared/ui/tems-badge";
import "@components/shared/ui/tems-tab-item";

const meta: Meta<object> = {
  title: "components/orbit/tems-viewport",
  tags: ["autodocs", "!dev", "Organisms"],
  render: () => {
    new TemsViewport();

    return html`<tems-viewport>
      <tems-header slot="header" heading="Sample Catalog">
        <div slot="submenu">
          <style>
            .labels {
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              gap: var(--scale-200);
            }
          </style>
          <div class="labels">
            <tems-tab-item label="All" active=""></tems-tab-item>
            ${Array.from(
              { length: Math.floor(Math.random() * 6) + 1 },
              () => html`<tems-tab-item
                label=${lorem.generateWords(Math.floor(Math.random() * 3) + 1)}
              ></tems-tab-item>`,
            )}
          </div>
        </div>
      </tems-header>
      <div slot="content">
        <style>
          .card-grid {
            display: flex;
            padding: 24px 0;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
          }
        </style>
        <div class="card-grid">
          ${Array.from(
            { length: 6 },
            () => html`<tems-card-catalog
              type="horizontal"
              background-img="https://placehold.co/400x400?text=Image"
              org-logo="https://placehold.co/400x400?text=Logo"
              .logoOnTop=${Math.random() > 0.5}
              .badge=${lorem.generateWords(Math.floor(Math.random() * 3) + 1)}
              .tags=${Array.from(
                { length: Math.floor(Math.random() * 8) + 1 },
                () => lorem.generateWords(Math.floor(Math.random() * 3) + 1),
              )}
              .header=${lorem.generateSentences(
                Math.floor(Math.random() * 3) + 1,
              )}
              .content=${lorem.generateParagraphs(
                Math.floor(Math.random() * 3) + 1,
              )}
              .isFullSize=${true}
            ></tems-card-catalog>`,
          )}
        </div>
      </div>
    </tems-viewport>`;
  },
};

export default meta;

export type TemsViewportStory = StoryObj<object>;

export const Default: TemsViewportStory = {};