// TODO: https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=395-7819&m=dev
import { html, nothing } from "lit";

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

import {
  TemsSearchBar,
  type TemsSearchBarProps,
} from "@components/forms/search/tems-search-bar";

import "@components/forms/tems-input";
import "@components/forms/ui/tems-input-field";
import "@components/forms/search/ui/tems-active-tags";
import "@components/forms/ui/tems-tag-action";
import "@components/buttons/tems-button";
import "@components/buttons/tems-dropdown";
import "@components/buttons/ui/tems-dropdown-item";

const active_tags = [
  { label: "Tag 1", active: true },
  { label: "Tag 2", active: false },
  { label: "Tag 3", active: true },
  { label: "Tag 4", active: false },
];

const meta: Meta<TemsSearchBarProps> = {
  title: "components/forms/search/tems-search-bar",
  tags: ["autodocs", "!dev", "Molecules"],
  render: (args) => {
    new TemsSearchBar();

    return html`<tems-search-bar
      display-saved-search=${args.displaySavedSearch || nothing}
      display-filters=${args.displayFilters || nothing}
      display-views=${args.displayViews || nothing}
      display-active-tags=${args.displayActiveTags || nothing}
      .dropdownCardElement=${args.dropdownCardElement || nothing}
      .dropdownListElement=${args.dropdownListElement || nothing}
      .dropdownTableElement=${args.dropdownTableElement || nothing}
      .dropdownMapElement=${args.dropdownMapElement || nothing}
    >
      ${
        args.displayActiveTags
          ? html` <tems-active-tags .tags=${active_tags}></tems-active-tags> `
          : nothing
      }
    </tems-search-bar>`;
  },
  args: {
    displaySavedSearch: true,
    displayFilters: true,
    displayViews: true,
    displayActiveTags: true,
    dropdownCardElement: true,
    dropdownListElement: true,
    dropdownTableElement: true,
    dropdownMapElement: true,
  },
  argTypes: {
    displaySavedSearch: {
      control: "boolean",
      description: "Display Saved Search",
    },
    displayFilters: {
      control: "boolean",
      description: "Display filters",
    },
    displayViews: {
      control: "boolean",
      description: "Display views",
    },
    displayActiveTags: {
      control: "boolean",
      description: "Display active tags",
    },
    dropdownCardElement: {
      control: "boolean",
      description: "Display active tags",
    },
    dropdownListElement: {
      control: "boolean",
      description: "Display active tags",
    },
    dropdownTableElement: {
      control: "boolean",
      description: "Display active tags",
    },
    dropdownMapElement: {
      control: "boolean",
      description: "Display active tags",
    },
  },
};

export default meta;

export type TemsSearchBarStory = StoryObj<TemsSearchBarProps>;

export const Todo: TemsSearchBarStory = {};