// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { SearchInputField } from './search-input-field.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './search-input-field.mdx';

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

const DEFAULT_PROPS = {
  value: '',
  bold: false,
  onChange: action('change'),
  placeholder: 'Some placeholder',
  large: false,
  label: 'Search Input',
  hideLabel: false,
  focusOnMount: false,
};

export const Default = () => <SearchInputField {...DEFAULT_PROPS} />;
export const Bold = () => <SearchInputField {...DEFAULT_PROPS} bold />;
export const Large = () => <SearchInputField {...DEFAULT_PROPS} large />;

export const Value = () => (
  <SearchInputField {...DEFAULT_PROPS} large value="Some preset" />
);

export const HiddenLabel = () => (
  <SearchInputField {...DEFAULT_PROPS} large hideLabel />
);

export const FocusOnMount = () => (
  <SearchInputField {...DEFAULT_PROPS} large focusOnMount />
);

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

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