// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { TextArea } from './text-area.component';
import type { TextAreaProps } from './text-area.proptypes';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './text-area.mdx';

export default {
  component: TextArea,
  title: 'Forms/TextArea',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: TextAreaProps<string> = {
  label: 'Story',
  placeholder: 'Tell me a story',
  onChange: action('onChange'),
  onFocus: action('onFocus'),
  onBlur: action('onBlur'),
};

export const Default = () => <TextArea {...DEFAULT_PROPS} />;
export const FixedHeight = () => <TextArea {...DEFAULT_PROPS} height="250px" />;
export const HiddenLabel = () => <TextArea {...DEFAULT_PROPS} hideLabel />;
export const Disabled = () => <TextArea {...DEFAULT_PROPS} disabled />;

export const FocusOnMount = () => (
  <TextArea {...DEFAULT_PROPS} value="Let me tell you a story" focusOnMount />
);

export const Resizable = () => <TextArea {...DEFAULT_PROPS} resize />;

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={TextArea} {...DEFAULT_PROPS} />
);

export const MixinsStackee = () => (
  <StackeeChecker Component={TextArea} {...DEFAULT_PROPS} />
);
