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

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

import {
  TemsButton,
  type TemsButtonProps,
} from "@components/buttons/tems-button";

import "~icons/heroicons-outline/selector";
import "~icons/heroicons-outline/cursor-click";

const DEFAULT_ICON = html`<icon-heroicons-outline-selector></icon-heroicons-outline-selector>`;

const meta: Meta<TemsButtonProps> = {
  title: "components/buttons/tems-button",
  tags: ["autodocs", "!dev", "Atoms"],
  render: (args) => {
    new TemsButton();

    return html`<tems-button
      label=${args.label || nothing}
      type=${args.type || nothing}
      .iconLeft=${args.iconLeft || nothing}
      .iconRight=${args.iconRight || nothing}
      size=${args.size || nothing}
      disabled=${args.disabled || nothing}
    ></tems-button>`;
  },
  args: {
    label: undefined,
    size: "md",
    type: "primary",
    iconLeft: undefined,
    iconRight: undefined,
    disabled: false,
  },
  argTypes: {
    label: { control: "text" },
    size: {
      control: "select",
      table: {
        defaultValue: { summary: "md" },
      },
      options: ["sm", "md", "lg"],
    },
    type: {
      control: "select",
      table: {
        defaultValue: { summary: "primary" },
      },
      options: [
        "primary",
        "link-color",
        "outline-color",
        "outline-gray",
        "transparent-color",
        "transparent-gray",
      ],
    },
    iconLeft: {
      control: {
        type: "select",
        labels: { undefined: "undefined", "[object Object]": "Sample icon" },
      },
      table: { defaultValue: { summary: undefined } },
      options: [undefined, DEFAULT_ICON],
    },
    iconRight: {
      control: {
        type: "select",
        labels: { undefined: "undefined", "[object Object]": "Sample icon" },
      },
      table: { defaultValue: { summary: undefined } },
      options: [undefined, DEFAULT_ICON],
    },
    disabled: {
      control: "boolean",
      table: { defaultValue: { summary: "false" } },
    },
  },
};

export default meta;

export type TemsButtonStory = StoryObj<TemsButtonProps>;

export const Default: TemsButtonStory = {
  args: {
    label: "Button",
  },
};

export const OutlineGray: TemsButtonStory = {
  args: {
    label: "Button",
    type: "outline-gray",
  },
};

export const OutlineColor: TemsButtonStory = {
  args: {
    label: "Button",
    type: "outline-color",
  },
};

export const TransparentGray: TemsButtonStory = {
  args: {
    label: "Button",
    type: "transparent-gray",
  },
};

export const TransparentColor: TemsButtonStory = {
  args: {
    label: "Button",
    type: "transparent-color",
  },
};

export const LinkColor: TemsButtonStory = {
  args: {
    label: "Button",
    type: "link-color",
  },
};

export const PrimaryIconLeft: TemsButtonStory = {
  args: {
    label: "Button",
    type: "primary",
    iconLeft: DEFAULT_ICON,
  },
};

export const PrimaryIconRight: TemsButtonStory = {
  args: {
    label: "Button",
    type: "primary",
    iconRight: DEFAULT_ICON,
  },
};

export const PrimaryIconBoth: TemsButtonStory = {
  args: {
    label: "Button",
    type: "primary",
    iconLeft: DEFAULT_ICON,
    iconRight: DEFAULT_ICON,
  },
};