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

import { InputWithLabel } from '.';

const meta: Meta<typeof InputWithLabel> = {
  title: 'Components/InputWithLabel',
  component: InputWithLabel,
  argTypes: {
    variant: {
      defaultValue: '',
    },
  },
};

export default meta;

type Story = StoryObj<typeof InputWithLabel>;

export const Default: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    value: 'Luke Skywalker',
  },
};

export const Error: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    status: 'error',
  },
};

export const ErrorWithMessage: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    status: 'error',
    errorMessage: 'You are not my father',
  },
};

export const Elevated: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    variant: 'elevated',
  },
};

export const ElevatedError: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    variant: 'elevated',
    status: 'error',
    errorMessage: 'Something went no no',
  },
};

export const WithAppend: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    variant: 'elevated',
    append: <div style={{ alignSelf: 'flex-end' }}>🍩</div>,
    id: 'my-id',
  },
};

export const Disabled: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    disabled: true,
  },
};

export const Readonly: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    readOnly: true,
    value: 'Darth Vader',
  },
};

export const PassingPropsToLabel: Story = {
  args: {
    placeholder: 'Luke Skywalker',
    label: 'Name',
    value: 'Darth Vader',
    labelProps: {
      className: 'bg-elevated',
    },
  },
};
