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

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

import {
  TemsLabel,
  type TemsLabelProps,
} from "@components/forms/ui/tems-label";

const meta: Meta<TemsLabelProps> = {
  title: "components/forms/ui/tems-label",
  tags: ["autodocs", "!dev", "Atoms"],
  render: (args) => {
    new TemsLabel();

    return html`<tems-label
      label=${args.label || nothing}
      info=${args.info || nothing}
      required=${args.required || nothing}
      .optional=${args.optional || nothing}
    ></tems-label>`;
  },
  args: {
    label: undefined,
    info: undefined,
    optional: undefined,
    required: false,
  },
  argTypes: {
    label: { control: "text", description: "Label or slot" },
    info: { control: "text", description: "Tooltip" },
    optional: {
      control: "text",
      description: 'Optional mention, if true default to "(optional)"',
      table: { defaultValue: { summary: "false" } },
    },
    required: { control: "boolean" },
  },
};

export default meta;

export type TemsLabelStory = StoryObj<TemsLabelProps>;

export const Default: TemsLabelStory = {
  args: {
    label: "Label",
  },
};

export const InfoTooltip: TemsLabelStory = {
  args: {
    label: "Label",
    info: "Some info about this field",
  },
};

export const Required: TemsLabelStory = {
  args: {
    label: "Label",
    required: true,
  },
};

export const Optional: TemsLabelStory = {
  args: {
    label: "Label",
    optional: "true",
  },
};

export const OptionalCustom: TemsLabelStory = {
  args: {
    label: "Label",
    optional: "some text",
  },
};

export const OptionalCustomHtml: TemsLabelStory = {
  args: {
    label: "Label",
    optional: html`<i>some</i>&nbsp;<b>cool</b>&nbsp;html!`,
  },
};

export const RequiredWithInfo: TemsLabelStory = {
  args: {
    label: "Label",
    info: "Some info about this field",
    required: true,
  },
};

export const OptionalWithInfo: TemsLabelStory = {
  args: {
    label: "Label",
    info: "Some info about this field",
    optional: "true",
  },
};

export const OptionalCustomHtmlWithInfo: TemsLabelStory = {
  args: {
    label: "Label",
    info: "Some info about this field",
    optional: html`<i>some</i>&nbsp;<b>cool</b>&nbsp;html!`,
  },
};