// @flow
import React, { useState, useCallback } from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { TextInput } from './index';
import type { TextInputProps } from './text-input.proptypes';
import { Grid, GridItem } from '../../structures';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './TEXT_INPUT.mkd';

const TextInputDemo = ({
  value,
  large,
  iconType,
  iconPosition,
  label,
  placeholder = "Look a placeholder that's really long!",
  onFocus,
  onBlur,
  disabled,
  error,
  focusOnMount,
  mask,
  maskOptions,
  onChange,
  className = '',
  buttonText,
  inputMode,
}: TextInputProps<string>) => {
  const [demoValue, setDemoValue] = useState(value);
  const handleValueChanged = useCallback(
    (newValue, event) => {
      setDemoValue(newValue);
      onChange(newValue, event);
    },
    [onChange],
  );

  return (
    <TextInput
      label={label}
      onChange={handleValueChanged}
      value={demoValue}
      iconType={iconType}
      iconPosition={iconPosition}
      placeholder={placeholder}
      onFocus={onFocus}
      onBlur={onBlur}
      large={large}
      disabled={disabled}
      error={error}
      focusOnMount={focusOnMount}
      className={className}
      mask={mask}
      maskOptions={maskOptions}
      buttonText={buttonText}
      inputMode={inputMode}
    />
  );
};

const StyledTextInputDemo = styled(TextInputDemo)`
  width: 400px;
  padding-right: 25px;
  border: 5px solid red;
`;

export const textInputWithButtonTextStory = (
  <TextInputDemo label="" onChange={action('onChange')} buttonText="Show" />
);

export const textInputWithButtonTextWithErrorStory = (
  <TextInputDemo
    label=""
    onChange={action('onChange')}
    buttonText="Show"
    error
  />
);

storiesOf('Core/Forms/TextInput', module)
  .addDecorator(story => (
    <Grid>
      <GridItem sm={12} md={6} lg={4}>
        {story()}
      </GridItem>
    </Grid>
  ))
  .add(
    'normal',
    withDocs(docs)(() => (
      <TextInputDemo label="" onChange={action('onChange')} />
    )),
  )
  .add(
    'large',
    withDocs(docs)(() => (
      <TextInputDemo label="" large onChange={action('onChange')} />
    )),
  )
  .add('with button text', withDocs(docs)(() => textInputWithButtonTextStory))
  .add(
    'with button text with error',
    withDocs(docs)(() => textInputWithButtonTextWithErrorStory),
  )
  .add(
    'with icon (left)',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Omg a label"
        iconType="lock"
        iconPosition="left"
        placeholder="Look a placeholder that's really long!"
        value="Wooo a value!"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    )),
  )
  .add(
    'with icon (right)',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Omg a label"
        iconType="lock"
        iconPosition="right"
        placeholder="Look a placeholder that's really long!"
        value="Wooo a value!"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    )),
  )
  .add(
    'with icon (right, disabled)',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Omg a label"
        iconType="lock"
        iconPosition="right"
        disabled
        placeholder="Look a placeholder that's really long!"
        value="Wooo a value!"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    )),
  )
  .add(
    'with icon with error',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Omg a label"
        iconType="lock"
        iconPosition="right"
        error
        placeholder="Look a placeholder that's really long!"
        value="Wooo a value!"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    )),
  )
  .add(
    'with error',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Omg a label"
        placeholder="Look a placeholder that's really long!"
        value="O no, an error"
        error
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    )),
  )
  .add(
    'error (string)',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Omg a label"
        placeholder="Look a placeholder that's really long!"
        value="O no, an error"
        error="dangnamit I'm broken"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        large
      />
    )),
  )
  .add(
    'error (array)',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Omg a label"
        placeholder="Look a placeholder that's really long!"
        value="O no, an error"
        error={["dangnamit I'm broken", "dangnamit I'm broken"]}
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        large
      />
    )),
  )
  .add(
    'focused on mount',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Omg a label"
        placeholder="Look a placeholder that's really long!"
        value="Your input here"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        focusOnMount
      />
    )),
  )
  .add(
    'with extended styles',
    withDocs(docs)(() => (
      <StyledTextInputDemo
        label="Omg a label"
        placeholder="Look a placeholder that's really long!"
        value="Your input here"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        focusOnMount
      />
    )),
  )
  .add(
    'with a date formatting mask',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a date"
        placeholder="DD / MM / YYYY"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        mask
        maskOptions={{
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: ' / ',
        }}
      />
    )),
  )
  .add(
    'with a date formatting mask - large',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a date"
        placeholder="DD / MM / YYYY"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        mask
        maskOptions={{
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: ' / ',
        }}
      />
    )),
  )
  .add(
    'with a date formatting mask - large',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a date"
        placeholder="DD / MM / YYYY"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        mask
        maskOptions={{
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: ' / ',
        }}
        large
      />
    )),
  )
  .add(
    'with a date formatting mask - error',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a date"
        placeholder="DD / MM / YYYY"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        mask
        maskOptions={{
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: ' / ',
        }}
        error="dangnamit I'm broken"
      />
    )),
  )
  .add(
    'with a date formatting mask - focus on mount',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a date"
        placeholder="DD / MM / YYYY"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        mask
        maskOptions={{
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: ' / ',
        }}
        focusOnMount
      />
    )),
  )
  .add(
    'with a date formatting mask - icon left',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a date"
        placeholder="DD / MM / YYYY"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        mask
        maskOptions={{
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: ' / ',
        }}
        iconType="lock"
        iconPosition="left"
      />
    )),
  )
  .add(
    'with a date formatting mask - icon right',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a date"
        placeholder="DD / MM / YYYY"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        mask
        maskOptions={{
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: ' / ',
        }}
        iconType="lock"
        iconPosition="right"
      />
    )),
  )
  .add(
    'with a date formatting mask - extended styles',
    withDocs(docs)(() => (
      <StyledTextInputDemo
        label="Enter a date"
        placeholder="DD / MM / YYYY"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        mask
        maskOptions={{
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: ' / ',
        }}
      />
    )),
  )
  .add(
    'with a phone formatting mask',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a phone number (CA)"
        placeholder="555 444 3333"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        type="number"
        mask
        maskOptions={{
          phone: true,
          phoneRegionCode: 'CA',
        }}
      />
    )),
  )
  .add(
    'with inputMode numeric',
    withDocs(docs)(() => (
      <TextInputDemo
        label="Enter a number"
        placeholder="2"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        inputMode="numeric"
        type="number"
      />
    )),
  );
