import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { action } from 'storybook/actions';
import '../field/Field.svelte';
import './Textinput.svelte';
const meta = {
    title: 'Form Elements/TextInput',
    component: 'm-textinput',
    subcomponents: { Field: 'm-field' },
    argTypes: {
        inputtype: {
            control: 'radio',
            options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text'],
        },
        size: {
            control: 'radio',
            options: ['s', 'm'],
        },
    },
    args: {
        id: 'textInputId',
        placeholder: 'Placeholder',
    },
    render: (args) => {
        const onInput = action('input');
        const onChange = action('change');
        const onFocus = action('focus');
        const onBlur = action('blur');
        return html `
      <m-field id=${ifDefined(args.id)} label="Label">
        <m-textinput
          id=${ifDefined(args.id)}
          name=${ifDefined(args.name)}
          value=${ifDefined(args.value)}
          placeholder=${ifDefined(args.placeholder)}
          inputtype=${ifDefined(args.inputtype)}
          ?isinvalid=${args.isinvalid}
          ?disabled=${args.disabled}
          size=${ifDefined(args.size)}
          ?readonly=${args.readonly}
          ?isclearable=${args.isclearable}
          clearlabel=${ifDefined(args.clearlabel)}
          prefix=${ifDefined(args.prefix)}
          suffix=${ifDefined(args.suffix)}
          min=${ifDefined(args.min)}
          @input=${(event) => onInput(event)}
          @change=${(event) => onChange(event)}
          @focus=${(event) => onFocus(event)}
          @blur=${(event) => onBlur(event)}
        ></m-textinput>
      </m-field>
    `;
    },
};
export default meta;
export const Value = {
    args: {
        id: 'withValueId',
        value: 'Value of the input component',
        isclearable: true,
    },
    parameters: {
        docs: {
            description: {
                story: 'TextInput initialized with a predefined value. The clear action is enabled, allowing users to quickly remove the current content and return the field to an empty state.',
            },
        },
    },
};
export const Default = {
    render: () => html `
    <m-field id="labelId" label="Label">
      <m-textinput id="labelId" placeholder="Placeholder"></m-textinput>
    </m-field>
  `,
    parameters: {
        docs: {
            description: {
                story: 'Default TextInput wrapped in a Field component with a label. This configuration represents the recommended usage for accessible forms requiring consistent layout, labeling, and user guidance.',
            },
        },
    },
};
export const Standalone = {
    render: () => html ` <m-textinput id="textInputId" placeholder="Placeholder"></m-textinput> `,
    parameters: {
        docs: {
            description: {
                story: 'TextInput rendered without a Field wrapper. Use this approach only when labels, help text, validation feedback, or accessibility relationships are managed outside the component.',
            },
        },
    },
};
export const Small = {
    args: {
        id: 'smallId',
        size: 's',
    },
    parameters: {
        docs: {
            description: {
                story: 'Small-sized variant of the TextInput component. Intended for dense interfaces, compact layouts, or secondary forms where visual hierarchy and space efficiency are important.',
            },
        },
    },
};
export const MinValue = {
    args: {
        id: 'minValueId',
        inputtype: 'number',
        value: '4',
        min: '3',
    },
    parameters: {
        docs: {
            description: {
                story: 'Number TextInput configured with a minimum allowed value. This example demonstrates basic numeric constraints and helps prevent users from entering values below the defined threshold.',
            },
        },
    },
};
export const Disabled = {
    args: {
        id: 'disableId',
        disabled: true,
    },
    parameters: {
        docs: {
            description: {
                story: 'Disabled TextInput state where user interaction is prevented. The field cannot receive focus or input and clearly communicates its inactive status through visual styling.',
            },
        },
    },
};
export const ReadOnly = {
    args: {
        id: 'readonlyId',
        readonly: true,
    },
    parameters: {
        docs: {
            description: {
                story: 'Read-only TextInput displaying a value that can be selected and copied but not edited. Useful for presenting system-generated or immutable information.',
            },
        },
    },
};
export const Valid = {
    render: () => html `
    <m-field
      id="inputvalidId"
      label="Label"
      requirementtext="required"
      isvalid
      message="Validation message (Be concise and use comprehensive words)"
    >
      <m-textinput id="inputvalidId" placeholder="Placeholder"></m-textinput>
    </m-field>
  `,
    parameters: {
        docs: {
            description: {
                story: 'TextInput wrapped in a Field component displaying a valid state. A validation message confirms successful input and provides clear, positive feedback to the user.',
            },
        },
    },
};
export const Invalid = {
    render: () => html `
    <m-field
      id="invalidId"
      label="Label"
      requirementtext="required"
      isinvalid
      message="Error message (Be concise and use comprehensive words)"
    >
      <m-textinput id="invalidId" placeholder="Placeholder" isinvalid></m-textinput>
    </m-field>
  `,
    parameters: {
        docs: {
            description: {
                story: 'TextInput wrapped in a Field component displaying an invalid state. Error messaging and visual cues clearly indicate validation issues and guide users toward correction.',
            },
        },
    },
};
export const Loading = {
    render: () => html `
    <m-field
      id="loadingId"
      label="Label"
      requirementtext="required"
      isloading
      message="Loading message (Be concise and use comprehensive words)"
    >
      <m-textinput id="loadingId" placeholder="Placeholder"></m-textinput>
    </m-field>
  `,
    parameters: {
        docs: {
            description: {
                story: 'TextInput wrapped in a Field component in a loading state. Use this state when asynchronous validation or background processing is occurring.',
            },
        },
    },
};
export const WithPrefix = {
    args: {
        prefix: 'Prefix',
    },
};
export const WithSuffix = {
    args: {
        suffix: 'Suffix',
    },
};
