import { useState } from 'react';
import { Meta, StoryObj } from '@storybook/react-webpack5';
import { Input } from '../inputs/Input';
import { Field, FieldProps } from './Field';
import { Sentiment } from '../common';

const meta: Meta<typeof Field> = {
  component: Field,
  tags: ['!autodocs', '!manifest'],
  title: 'Forms/Field/Tests',
};
export default meta;

type Story = StoryObj<typeof Field>;

export const DeprecatedProps: Story = {
  render: (args: FieldProps) => {
    const [value, setValue] = useState<string | undefined>('This is some text');
    return (
      <div>
        {/* instance with deprecated `hint` prop */}
        <Field
          label="Text Input with deprecated `hint` prop"
          hint="This is a helpful message"
          sentiment={Sentiment.NEGATIVE}
          message="Validation error, please take a look"
          messageIconLabel={args.messageIconLabel}
          messageLoading={args.messageLoading}
        >
          <Input value={value} onChange={({ target }) => setValue(target.value)} />
        </Field>

        {/* instance with deprecated `error` & `hint` props */}
        <Field
          label="Text Input with deprecated `error` & `hint` props"
          hint="This is a helpful message"
          error="Validation error, please take a look"
          messageIconLabel={args.messageIconLabel}
          messageLoading={args.messageLoading}
        >
          <Input value={value} onChange={({ target }) => setValue(target.value)} />
        </Field>

        {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
        <Field
          label="Text Input with Info under the field"
          message="This is a helpful message"
          messageIconLabel={args.messageIconLabel}
          messageLoading={args.messageLoading}
        >
          <Input value={value} onChange={({ target }) => setValue(target.value)} />
        </Field>
      </div>
    );
  },
};