import { useState } from 'react';
import { action } from 'storybook/actions';

import { Input } from '../inputs/Input';
import { Field, FieldProps } from './Field';
import { Sentiment } from '../common';
import DateInput from '../dateInput';
import { lorem10, lorem40 } from '../test-utils';
import { TextArea } from '../inputs/TextArea';
import { SearchInput } from '../inputs/SearchInput';
import Info from '../info';

export default {
  component: Field,
  title: 'Forms/Field',

  argTypes: {
    messageIconLabel: {
      control: 'text',
    },
  },
};

export const Basic = (args: FieldProps) => {
  const [value, setValue] = useState<string | undefined>('This is some text');
  return (
    <div className="row">
      <div className="col-md-8 col-md-offset-2">
        <Field label="Required Text Input">
          <Input value={value} onChange={({ target }) => setValue(target.value)} />
        </Field>
        <Field label="Text Input" required={false}>
          <Input value={value} onChange={({ target }) => setValue(target.value)} />
        </Field>
        <Field
          label="Text Input with Description"
          required={false}
          description="This a field Description"
        >
          <Input value={value} onChange={({ target }) => setValue(target.value)} />
        </Field>
        <Field
          required={false}
          label="Text Input with Validation Error"
          description="This a field Description"
          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>

        <Field label="Date Of Birth" required={false}>
          <DateInput value={undefined} onChange={action('date-input-changed')} />
        </Field>

        <Field label="Date Of Birth with Description" required={false} description={lorem10}>
          <DateInput value={undefined} onChange={action('date-input-changed')} />
        </Field>

        <Field label="Search business" required={false}>
          <SearchInput />
        </Field>

        <Field label="Textarea" required={false}>
          <TextArea />
        </Field>

        <Field
          label="Textarea with Description"
          required={false}
          description="This a TextArea Description"
        >
          <TextArea />
        </Field>

        <Field
          required={false}
          label="Textarea with Validation Error"
          description="This a TextArea Description"
          message={lorem10}
          sentiment="negative"
          messageIconLabel={args.messageIconLabel}
          messageLoading={args.messageLoading}
        >
          <TextArea />
        </Field>

        <Field
          required={false}
          label={
            <>
              Label with Suffix <Info content={lorem40} />
            </>
          }
        >
          <TextArea />
        </Field>
      </div>
    </div>
  );
};

export const Messages = (args: FieldProps) => {
  const [value, setValue] = useState<string | undefined>('This is some text');
  return (
    <div>
      <Field
        label="Text Input with Positive Message"
        sentiment={Sentiment.POSITIVE}
        message="Positive message"
        messageIconLabel={args.messageIconLabel}
        messageLoading={args.messageLoading}
      >
        <Input value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>

      <Field
        label="Text Input with Proposition Message"
        sentiment="proposition"
        message="Proposition message"
        messageIconLabel={args.messageIconLabel}
        messageLoading={args.messageLoading}
      >
        <Input value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>

      <Field
        label="Text Input with Warning Message"
        sentiment={Sentiment.WARNING}
        message="Warning message"
        messageIconLabel={args.messageIconLabel}
        messageLoading={args.messageLoading}
      >
        <Input value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>

      <Field
        label="Text Input with Validation Error"
        sentiment={Sentiment.NEGATIVE}
        message="This is a required field"
        messageIconLabel={args.messageIconLabel}
        messageLoading={args.messageLoading}
      >
        <Input value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>
    </div>
  );
};