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

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

import "@components/forms/ui/tems-label";

import {
  TemsTextarea,
  type TemsTextareaProps,
} from "@components/forms/tems-textarea";

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

    return html`<tems-textarea
      rows=${args.rows || nothing}
      .value=${args.value || nothing}
      placeholder=${args.placeholder || nothing}
      disabled=${args.disabled || nothing}
      status=${args.status || nothing}
      label=${args.label || nothing}
      info=${args.info || nothing}
      optional=${args.optional || nothing}
      required=${args.required || nothing}
      hint=${args.hint || nothing}
    ></tems-textarea>`;
  },
  args: {
    rows: 3,
    value: undefined,
    placeholder: undefined,
    status: undefined,
    disabled: undefined,
    label: undefined,
    info: undefined,
    optional: undefined,
    required: undefined,
    hint: undefined,
  },
  argTypes: {
    rows: { control: "number" },
    value: { control: "text" },
    placeholder: { 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" } },
    },
    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 TemsTextareaStory = StoryObj<TemsTextareaProps>;

export const Default: TemsTextareaStory = {
  args: {},
};

export const Sample: TemsTextareaStory = {
  args: {
    label: "Label",
    info: "Sample info",
    hint: "Hint copy",
    placeholder: "Placeholder",
  },
};

export const Filled: TemsTextareaStory = {
  args: {
    value: "Sample text",
    label: "Label",
    info: "Sample info",
    hint: "Hint copy",
    placeholder: "Placeholder",
  },
};

export const Disabled: TemsTextareaStory = {
  args: {
    label: "Label",
    info: "Sample info",
    hint: "Hint copy",
    placeholder: "Placeholder",
    disabled: true,
  },
};

export const DisabledFilled: TemsTextareaStory = {
  args: {
    value: "Sample text",
    label: "Label",
    info: "Sample info",
    hint: "Hint copy",
    placeholder: "Placeholder",
    disabled: true,
  },
};

export const LotOfRows: TemsTextareaStory = {
  args: {
    label: "Label",
    placeholder: "Placeholder",
    rows: 10,
  },
};