/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-native/no-color-literals */

import { storiesOf } from '@storybook/react-native';
import * as React from 'react';
import { ViewStyle, TextStyle } from 'react-native';
import { State } from 'react-powerplug';

import { StoryScreen, Story, UseCase } from '~/storybook/views';

import { Text, TextField } from '../';

declare let module;

const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }];

const inputStyleArray: TextStyle[] = [
  {
    backgroundColor: 'rebeccapurple',
    color: 'white',
    padding: 40,
  },
  {
    borderWidth: 10,
    borderRadius: 4,
    borderColor: '#7fff00',
  },
];

storiesOf('TextField', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Labelling', () => (
    <Story>
      <UseCase text="Normal text" usage="Use placeholder to set the text.">
        <State initial={{ value: '' }}>
          {({ state, setState }) => (
            <TextField
              placeholder="omg your name"
              value={state.value}
              onChangeText={(value) => setState({ value })}
            />
          )}
        </State>
      </UseCase>
      <UseCase text="i18n text" usage="Use placeholderTx for i18n lookups">
        <State initial={{ value: '' }}>
          {({ state, setState }) => (
            <TextField
              placeholderTx="storybook.placeholder"
              value={state.value}
              onChangeText={(value) => setState({ value })}
            />
          )}
        </State>
      </UseCase>
    </Story>
  ))
  .add('Style presets', () => (
    <Story>
      <UseCase noPad style={{ padding: 20 }} text='"input" preset'>
        <State initial={{ value: 'Lorem ipsum' }}>
          {({ state, setState }) => (
            <TextField
              preset="input"
              value={state.value}
              onChangeText={(value) => setState({ value })}
            />
          )}
        </State>
      </UseCase>
    </Story>
  ))
  .add('Style Overrides', () => (
    <Story>
      <UseCase
        noPad
        text="Container Styles"
        usage="Useful for applying margins when laying out a form to remove padding if the form brings its own."
      >
        <State initial={{ value: 'Iñigo' }}>
          {({ state, setState }) => (
            <TextField
              placeholderTx="storybook.placeholder"
              value={state.value}
              onChangeText={(value) => setState({ value })}
            />
          )}
        </State>
        <State initial={{ value: 'Montoya' }}>
          {({ state, setState }) => (
            <TextField
              style={{ paddingBottom: 0 }}
              value={state.value}
              onChangeText={(value) => setState({ value })}
            />
          )}
        </State>
      </UseCase>
      <UseCase
        text="Input Styles"
        usage="Useful for 1-off exceptions.  Try to steer towards presets for this kind of thing."
      >
        <State initial={{ value: 'fancy colour' }}>
          {({ state, setState }) => (
            <TextField
              inputStyle={{
                backgroundColor: 'rebeccapurple',
                color: 'white',
                padding: 40,
                borderWidth: 10,
                borderRadius: 4,
                borderColor: 'hotpink',
              }}
              value={state.value}
              onChangeText={(value) => setState({ value })}
            />
          )}
        </State>
        <Text preset="body2" text="* attention designers: i am so sorry" />
      </UseCase>
      <UseCase text="Style array" usage="Useful for 1-off exceptions, but using style arrays.">
        <State initial={{ value: 'fancy colour' }}>
          {({ state, setState }) => (
            <TextField
              inputStyle={inputStyleArray}
              style={styleArray}
              value={state.value}
              onChangeText={(value) => setState({ value })}
            />
          )}
        </State>
        <Text preset="body2" text="* attention designers: i am so sorry" />
      </UseCase>
    </Story>
  ));
