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

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

import "@components/forms/searchbar/tems-defined-field";
import "@components/forms/ui/tems-input-field";
import "@components/forms/ui/tems-input-posttab";
import "@components/forms/ui/tems-input-pretab";
import "@components/forms/ui/tems-label";

import { TemsInput, type TemsInputProps } from "@components/forms/tems-input";

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

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

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

    return html`<tems-input
      type=${args.type || nothing}
      value=${args.value || nothing}
      placeholder=${args.placeholder || nothing}
      .icon=${args.icon || nothing}
      status=${args.status || nothing}
      disabled=${args.disabled || nothing}
      .pretabLabel=${args.pretabLabel || nothing}
      .pretabIcon=${args.pretabIcon || nothing}
      .posttabIcon=${args.posttabIcon || nothing}
      label=${args.label || nothing}
      info=${args.info || nothing}
      optional=${args.optional || nothing}
      required=${args.required || nothing}
      hint=${args.hint || nothing}
    ></tems-input>`;
  },
  args: {
    type: undefined,
    value: undefined,
    placeholder: undefined,
    icon: undefined,
    status: undefined,
    disabled: undefined,
    pretabLabel: undefined,
    pretabIcon: undefined,
    posttabIcon: undefined,
    label: undefined,
    info: undefined,
    optional: undefined,
    required: undefined,
    hint: undefined,
  },
  argTypes: {
    type: {
      control: "text",
      description:
        "Input type, use `search-` prefix for input-field instead of defined-field",
    },
    value: { control: "text" },
    placeholder: { control: "text", description: "Placeholder text" },
    icon: {
      control: {
        type: "select",
        labels: { undefined: "Default icon", "[object Object]": "Sample icon" },
      },
      table: { defaultValue: { summary: "mingcute:search-3-line" } },
      options: [undefined, ICON_OPTION_SELECTOR],
    },
    status: {
      control: "text",
      table: {
        defaultValue: { summary: "undefined" },
      },
      description: "undefined/true/false/custom message",
    },
    disabled: {
      control: "boolean",
      table: { defaultValue: { summary: "false" } },
    },
    pretabLabel: { control: "text", description: "Pretab label" },
    pretabIcon: {
      control: {
        type: "select",
        labels: {
          undefined: "No pretab icon",
          "[object Object]": "Sample icon",
        },
      },
      options: [undefined, ICON_OPTION_SELECTOR],
    },
    posttabIcon: {
      control: {
        type: "select",
        labels: {
          undefined: "No posttab icon",
          "[object Object]": "Sample icon",
        },
      },
      options: [undefined, ICON_OPTION_SELECTOR],
    },
    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" },
    hint: { control: "text", description: "Hint text" },
  },
};

export default meta;

export type TemsInputStory = StoryObj<TemsInputProps>;

export const Default: TemsInputStory = {
  args: {
    type: "search",
  },
};

export const SampleSearch: TemsInputStory = {
  args: {
    type: "search",
    label: "Label",
    placeholder: "Search for...",
    info: "Sample info",
    hint: "Hint copy",
  },
};

export const SampleText: TemsInputStory = {
  args: {
    type: "text",
    placeholder: "Placeholder",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
    label: "Label",
    info: "Sample info",
    hint: "Hint copy",
  },
};