import type { Meta, StoryObj } from '@storybook/react-vite';

import SearchIcon from '@/material-icons/400-24px/search.svg?react';

import { TextInputField, TextInput } from './text_input_field';

const meta = {
  title: 'Components/Form Fields/TextInputField',
  component: TextInputField,
  args: {
    label: 'Label',
    hint: 'This is a description of this form field',
  },
} satisfies Meta<typeof TextInputField>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Simple: Story = {};

export const WithoutHint: Story = {
  args: {
    hint: undefined,
  },
};

export const Required: Story = {
  args: {
    required: true,
  },
};

export const Optional: Story = {
  args: {
    required: false,
  },
};

export const WithError: Story = {
  args: {
    required: false,
    status: 'error',
  },
};

export const WithWarning: Story = {
  args: {
    required: false,
    status: {
      variant: 'warning',
      message: 'Special characters are not allowed',
    },
  },
};

export const WithIcon: Story = {
  args: {
    label: 'Search',
    hint: undefined,
    icon: SearchIcon,
  },
};

export const Plain: Story = {
  render(args) {
    return <TextInput {...args} />;
  },
};

export const Disabled: Story = {
  ...Plain,
  args: {
    disabled: true,
    defaultValue: "This value can't be changed",
  },
};