import type { Meta, StoryObj } from '@storybook/vue3';
import { action } from '@storybook/addon-actions';

import MPasswordInput from './MPasswordInput.vue';

const meta: Meta<typeof MPasswordInput> = {
  title: 'Form Elements/PasswordInput',
  component: MPasswordInput,
  parameters: {
    docs: {
      description: {
        component:
          'A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).',
      },
    },
  },
  args: {
    id: 'passwordInputId',
    placeholder: 'Enter your password',
  },
  render: (args) => ({
    components: { MPasswordInput },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MPasswordInput 
        v-bind="args"
        @update:modelValue="handleUpdate"
      />
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MPasswordInput>;

export const WithValue: Story = {
  args: {
    id: 'withValueId',
    modelValue: 'Magic-word-123',
  },
};

export const Default: Story = {};

export const Clearable: Story = {
  args: {
    id: 'clearableId',
    modelValue: 'Magic-word-123',
    isClearable: true,
  },
};

export const Disabled: Story = {
  args: {
    id: 'disableId',
    disabled: true,
  },
};

export const ReadOnly: Story = {
  args: {
    id: 'readonlyId',
    readonly: true,
  },
};

export const Invalid: Story = {
  args: {
    id: 'invalidId',
    isInvalid: true,
  },
};