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

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

import { TemsInputPosttab } from "@components/forms/ui/tems-input-posttab";
import { TemsInputPretab } from "@components/forms/ui/tems-input-pretab";

import {
  TemsDefinedField,
  type TemsDefinedFieldProps,
} from "@components/forms/searchbar/tems-defined-field";

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

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

const meta: Meta<TemsDefinedFieldProps> = {
  title: "components/forms/searchbar/tems-defined-field",
  tags: ["autodocs", "!dev", "Molecules"],
  render: (args) => {
    new TemsInputPretab();
    new TemsInputPosttab();
    new TemsDefinedField();

    return html`<tems-defined-field
      label=${args.label || nothing}
      disabled=${args.disabled || nothing}
      status=${args.status || nothing}
      value=${args.value || nothing}
      .pretabLabel=${args.pretabLabel || nothing}
      .pretabIcon=${args.pretabIcon || nothing}
      .posttabIcon=${args.posttabIcon || nothing}
    ></tems-defined-field>`;
  },
  args: {
    value: undefined,
    label: undefined,
    icon: undefined,
    disabled: false,
    status: undefined,
    pretabLabel: undefined,
    pretabIcon: undefined,
    posttabIcon: undefined,
  },
  argTypes: {
    value: { control: "text" },
    label: { control: "text", description: "Placeholder text" },
    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],
    },
  },
};

export default meta;

export type TemsDefinedFieldStory = StoryObj<TemsDefinedFieldProps>;

export const Default: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
  },
};

export const IconLeft: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    pretabIcon: ICON_OPTION_SELECTOR,
  },
};

export const LabelLeft: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    pretabLabel: "www.",
  },
};

export const LabelIconLeft: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
  },
};

export const IconRight: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const Both: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const BothLabel: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const FilledBothLabel: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    value: "Something",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const ErrorBase: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    value: "Something",
    status: "false",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const ErrorMessage: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    value: "Something",
    status: "Error, custom message",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const ErrorEmpty: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    status: "Error, custom message",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const Success: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    value: "Something",
    status: "true",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const SuccessEmpty: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    status: "true",
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const Disabled: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    value: "Something",
    disabled: true,
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};

export const DisabledEmpty: TemsDefinedFieldStory = {
  args: {
    label: "Placeholder",
    disabled: true,
    pretabLabel: "www.",
    pretabIcon: ICON_OPTION_SELECTOR,
    posttabIcon: ICON_OPTION_SELECTOR,
  },
};