// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=649-14104&m=dev
import { html } from "lit";

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

import { TemsModal, type TemsModalProps } from "@components/modal/tems-modal";

import { get_random_3DObject } from "@mocks/objects/3DObject.mock";
import { get_random_civilSocietyObject } from "@mocks/objects/mediaobjects/civilSociety.mock";
import { get_random_dataOffer } from "@mocks/dataOffer.mock";
import { get_random_factCheckingObject } from "@mocks/objects/mediaobjects/factChecking.mock";
import { get_random_interactiveInfographicsObject } from "@mocks/objects/mediaobjects/interactiveInfographics.mock";
import { get_random_provider } from "@mocks/provider.mock";
import { get_random_service } from "@mocks/service.mock";
import { get_random_storiesObject } from "@mocks/objects/mediaobjects/stories.mock";

import "@components/buttons/tems-button";
import "@components/cards/tems-card-catalog";
import "@components/shared/ui/tems-badge";
import "@components/shared/ui/tems-division";

const meta: Meta<TemsModalProps> = {
  title: "components/modal/tems-modal",
  tags: ["autodocs", "!dev", "Organisms"],
  render: (args) => {
    new TemsModal();

    return html`<tems-modal .object=${args.object}></tems-modal>`;
  },
  args: {
    object: undefined,
  },
  argTypes: {
    object: {
      control: false,
    },
  },
};

export default meta;

export type TemsModalStory = StoryObj<TemsModalProps>;

export const Object_3dObject: TemsModalStory = {
  args: {
    object: get_random_3DObject({ imageCount: 3, keepImage: true, imageAsIframe: false }),
  },
};

export const Object_CivilSociety: TemsModalStory = {
  args: {
    object: get_random_civilSocietyObject({ imageCount: 4, keepImage: true, imageAsIframe: false }),
  },
};

export const Object_FactChecking: TemsModalStory = {
  args: {
    object: get_random_factCheckingObject({ imageCount: 1, keepImage: true, imageAsIframe: false }),
  },
};

export const Object_InteractiveInfographics: TemsModalStory = {
  args: {
    object: get_random_interactiveInfographicsObject({
      imageCount: 2,
      keepImage: true, imageAsIframe: false
    }),
  },
};

export const Object_Stories: TemsModalStory = {
  args: {
    object: get_random_storiesObject({
      imageCount: 1,
      keepImage: true, imageAsIframe: true
    }),
  },
};

export const NoImageObject: TemsModalStory = {
  args: {
    object: get_random_3DObject({ imageCount: 0, keepImage: true }),
  },
};

export const DataOffer: TemsModalStory = {
  args: {
    object: get_random_dataOffer(),
  },
};

export const Service: TemsModalStory = {
  args: {
    object: get_random_service(),
  },
};

export const Provider: TemsModalStory = {
  args: {
    object: get_random_provider(),
  },
};