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

import { Input, InputError, InputLabel } from '@/components/inputs';

const meta: Meta<typeof Input> = {
  component: Input,
};

export default meta;

type TStory = StoryObj<typeof Input>;

export const WithLabel: TStory = {
  args: {
    id: 'left',
    name: 'Input With Left Adornment',
    theme: 'light',
    placeholder: 'Placeholder',
    customSize: 'regular',
    disabled: false,
    error: false,
    onChange: value => {
      console.log(value);
    },
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/naming-convention
    TStory => (
      <>
        <InputLabel id="left" className="mb-2">
          Label
        </InputLabel>
        <TStory />
      </>
    ),
  ],
};

export const WithError: TStory = {
  args: {
    id: 'left',
    name: 'Input With Left Adornment',
    theme: 'light',
    placeholder: 'Placeholder',
    customSize: 'regular',
    disabled: false,
    error: true,
    onChange: value => {
      console.log(value);
    },
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/naming-convention
    TStory => (
      <div className="relative pb-4">
        <TStory />
        <InputError>Error</InputError>
      </div>
    ),
  ],
};

export const AdornmentLeft: TStory = {
  args: {
    id: 'left',
    name: 'Input With Left Adornment',
    theme: 'light',
    placeholder: 'Placeholder',
    customSize: 'lg',
    disabled: false,
    error: false,
    onChange: value => {
      console.log(value);
    },
    leftAdornment: <div className="pl-2 pr-1">@</div>,
  },
};

export const AdornmentRight: TStory = {
  args: {
    id: 'left',
    name: 'Input With Left Adornment',
    theme: 'light',
    customSize: 'regular',
    placeholder: 'Placeholder',
    disabled: false,
    error: false,
    onChange: value => {
      console.log(value);
    },
    rightAdornment: <div className="pr-2 pl-1">kg</div>,
  },
};

export const BothAdornments: TStory = {
  args: {
    id: 'both',
    name: 'Input With Both Adornments',
    theme: 'light',
    placeholder: 'yandex@yandex.ru',
    customSize: 'lg',
    disabled: false,
    error: false,
    onChange: value => {
      console.log(value);
    },
    leftAdornment: <div className="pl-2 pr-1">email</div>,
    rightAdornment: <div className="px-2 font-semibold">link</div>,
  },
};