import {
  TemsCardCatalog,
  type TemsCardCatalogProps,
} from "@components/cards/tems-card-catalog";

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

const meta: Meta<TemsCardCatalogProps & { action: boolean }> = {
  title: "components/cards/tems-card-catalog",
  tags: ["autodocs", "!dev", "Organisms"],
  render: (args) => {
    new TemsCardCatalog();

    const card = html`<tems-card-catalog
      type=${args.cardType}
      background-img=${args.backgroundImg}
      org-logo=${args.orgLogo}
      .logoOnTop=${args.logoOnTop}
      .badge=${args.badge}
      .tags=${args.tags}
      .header=${args.header}
      .content=${args.content}
      .isFullSize=${args.isFullSize}
      date=${args.date}
      language=${args.language}
      address=${args.address}
      source=${args.source}
      >${
        args.action
          ? html`<tems-button label="action" type="outline-color"></tems-button>`
          : nothing
      }</tems-card-catalog
    >`;

    if (args.cardType === "vertical" || !args.cardType) {
      return html`<style>
          .card-grid {
            display: flex;
            padding: 24px 32px;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
          }
          .card-grid tems-card-catalog {
            width: calc(33% - 20px);
            min-width: 356px;
          }
        </style>
        <div class="card-grid">${Array.from({ length: 2 }, () => card)}</div>`;
    }

    return card;
  },
  args: {
    isFullSize: true,
    cardType: "vertical",
    backgroundImg: undefined,
    logoOnTop: undefined,
    orgLogo: undefined,
    badge: undefined,
    tags: undefined,
    header: undefined,
    content: undefined,
    date: undefined,
    language: undefined,
    address: undefined,
    source: undefined,
    action: undefined,
  },
  argTypes: {
    isFullSize: {
      control: "boolean",
      table: { defaultValue: { summary: "false" } },
      description: "Display card image & badge",
    },
    cardType: {
      control: "select",
      table: {
        defaultValue: { summary: "vertical" },
      },
      options: ["vertical", "horizontal", "bill-image"],
    },
    date: {
      control: "text",
      description: "stringified date",
    },
    address: {
      control: "text",
      description: "string",
    },
    language: {
      control: "text",
      description: "string",
    },
    source: {
      control: "text",
      description: "string url",
    },
    backgroundImg: {
      control: "text",
      defaultValue: "https://placehold.co/260x160",
      description: "string url",
    },

    orgLogo: {
      control: "text",
      defaultValue: "https://placehold.co/260x160",
      description: "string url",
    },
    logoOnTop: {
      control: "boolean",
      table: { defaultValue: { summary: "false" } },
    },
    header: {
      control: "text",
      description: "Title",
    },
    badge: {
      control: "text",
      description: "string Badge over the image",
    },
    tags: {
      control: "object",
      description: "Array of strings Categories",
    },
    content: {
      control: "object",
      description: "string",
    },
    action: {
      control: "boolean",
      description: "Will display slotted default content",
    },
  },
};

export default meta;

export type TemsCardCatalogStory = StoryObj<
  TemsCardCatalogProps & { action: boolean }
>;

const baseArgs: TemsCardCatalogProps & { action: boolean } = {
  isFullSize: true,
  logoOnTop: false,
  orgLogo: "https://placehold.co/60x60?text=Logo",
  date: "20/01/2020",
  language: "fr",
  badge: "Media Category (Topic)",
  tags: Array.from({ length: 11 }, () => "Categorie"),
  header:
    "Title Lorem ipsum dolor sit amet consectetur. Purus sed lectus mus eget ut eu vitae volutpat. Elit.",
  content:
    "Lorem ipsum dolor sit amet consectetur. Amet facilisis viverra et urna pulvinar neque placerat ullamcorper interdum. Diam diam sit dolor iaculis et libero purus. Sapien arcu semper et lectus urna. Sed urna sollicitudin purus semper faucibus.",
  address: "Address",
  source: "https://rss.feed",
  action: true,
};

const generateStories = (
  base: TemsCardCatalogProps & { action: boolean },
  overrides: Record<
    string,
    Partial<TemsCardCatalogProps & { action: boolean }>
  >,
) => {
  const stories: Record<string, TemsCardCatalogStory> = {};

  for (const [name, args] of Object.entries(overrides)) {
    stories[name] = {
      args: { ...base, ...args },
    };
  }

  return stories;
};

const stories = generateStories(baseArgs, {
  Horizontal: {
    cardType: "horizontal",
    backgroundImg: "https://placehold.co/290x320?text=1/3",
    logoOnTop: true,
  },
  DefaultVertical: {
    backgroundImg: "https://placehold.co/260x160?text=167px",
    cardType: "vertical",
    logoOnTop: false,
  },
  NoContentVertical: {
    backgroundImg: "https://placehold.co/260x160?text=167px",
    cardType: "vertical",
    content: undefined,
  },
  VerticalNoAction: {
    isFullSize: false,
    action: false,
  },
  DefaultBilly: {
    cardType: "bill-image",
    backgroundImg: "https://placehold.co/500x420?text=1/2",
  },
  VerticalNoImageWithBadge: {
    backgroundImg: undefined,
    badge: "Badge Text",
  },
  VerticalOnlyImage: {
    backgroundImg: "https://placehold.co/260x160?text=167px",
    badge: undefined,
  },
  HorizontalNoTags: {
    cardType: "horizontal",
    backgroundImg: "https://placehold.co/290x320?text=1/3",
    logoOnTop: true,
    tags: [],
  },
  HorizontalOneTags: {
    cardType: "horizontal",
    backgroundImg: "https://placehold.co/290x320?text=1/3",
    logoOnTop: true,
    tags: Array.from({ length: 1 }, (_, i) => `Tag ${i + 1}`),
  },
  HorizontalManyTags: {
    cardType: "horizontal",
    backgroundImg: "https://placehold.co/290x320?text=1/3",
    logoOnTop: true,
    tags: Array.from({ length: 20 }, (_, i) => `Tag ${i + 1}`),
  },
  BillyNoImage: {
    cardType: "bill-image",
    backgroundImg: undefined,
  },
  HorizontalNoImage: {
    cardType: "horizontal",
    backgroundImg: undefined,
  },
  VerticalNoAddressNoSource: {
    address: undefined,
    source: undefined,
  },
  HorizontalNoAddressNoSource: {
    cardType: "horizontal",
    backgroundImg: "https://placehold.co/290x320?text=1/3",
    address: undefined,
    source: undefined,
  },
  VerticalLogoOnTop: {
    backgroundImg: "https://placehold.co/260x160?text=167px",
    cardType: "vertical",
    logoOnTop: true,
  },
});

export const Horizontal = stories.Horizontal;
export const DefaultVertical = stories.DefaultVertical;
export const NoContentVertical = stories.NoContentVertical;
export const VerticalNoAction = stories.VerticalNoAction;
export const DefaultBilly = stories.DefaultBilly;
export const VerticalNoImageWithBadge = stories.VerticalNoImageWithBadge;
export const VerticalOnlyImage = stories.VerticalOnlyImage;
export const HorizontalNoTags = stories.HorizontalNoTags;
export const HorizontalOneTags = stories.HorizontalOneTags;
export const HorizontalManyTags = stories.HorizontalManyTags;
export const HorizontalNoImage = stories.HorizontalNoImage;
export const BillyNoImage = stories.BillyNoImage;
export const VerticalNoAddressNoSource = stories.VerticalNoAddressNoSource;
export const HorizontalNoAddressNoSource = stories.HorizontalNoAddressNoSource;
export const VerticalLogoOnTop = stories.VerticalLogoOnTop;