import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer, reduxForm, Field } from 'redux-form';
import { storiesOf } from '@storybook/react';
import { InputLabel, InputAdornment } from 'material-ui/Input';
import { FormHelperText, FormControl } from 'material-ui/Form';
import Visibility from 'material-ui-icons/Visibility';
import InfoIcon from 'material-ui-icons/Info';
import IconButton from 'material-ui/IconButton';
import Tooltip from 'material-ui/Tooltip';

import TextField from './TextField';
import Input from './Input';

const store = createStore(
  combineReducers({
    form: formReducer
  }),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const StoryForm = reduxForm({
  form: 'story'
})(({ handleSubmit, children, submitting, pristine }) => (
  <form onSubmit={handleSubmit}>
    {children}
    <br />
    <button type="submit" disabled={pristine || submitting}>
      Submit
    </button>
  </form>
));

storiesOf('Form Components', module).add('TextField', () => (
  <Provider store={store}>
    <StoryForm onSubmit={values => alert(JSON.stringify(values))}>
      <div>
        <Field
          name="text-field"
          label="Plain TextField"
          placeholder="add your text here"
          component={TextField}
        />
        <FormHelperText>
          {"here's some help text "}
          <Tooltip title="this is a tooltip">
            <InfoIcon
              style={{ width: 12, height: 12, verticalAlign: 'bottom' }}
            />
          </Tooltip>
        </FormHelperText>
      </div>

      <FormControl>
        <InputLabel htmlFor="adorned-input">Adorned TextField</InputLabel>
        <Field
          component={Input}
          name="input-adorned"
          id="adorned-input"
          placeholder="add your text here"
          endAdornment={
            <InputAdornment position="end">
              <IconButton>
                <Visibility />
              </IconButton>
            </InputAdornment>
          }
        />
        <FormHelperText>{'Adorned input'}</FormHelperText>
      </FormControl>

      <div>
        <Field
          error
          name="text-field-error"
          label="Error state"
          component={TextField}
        />
        <FormHelperText error>error: value must be different</FormHelperText>
      </div>

      <div>
        <Field
          disabled
          name="text-field-disabled"
          label="disabled state"
          component={TextField}
        />
        <FormHelperText disabled>this field is disabled</FormHelperText>
      </div>
    </StoryForm>
  </Provider>
));

@@ -1439,16 +1439,121 @@
 text %22%7D%0A
+          %7B%0A            // fixme: this results in %22%3Cdiv%3E descendant of %3Cp%3E%22 error%0A            false &&%0A  
         
@@ -1602,16 +1602,18 @@
         
+  
 %3CInfoIco
@@ -1614,16 +1614,18 @@
 nfoIcon%0A
+  
         
@@ -1689,16 +1689,18 @@
 tom' %7D%7D%0A
+  
         
@@ -1716,16 +1716,18 @@
         
+  
 %3C/Toolti
@@ -1729,16 +1729,29 @@
 ooltip%3E%0A
+          %7D%0A%0A
         

disable tooltip until i can spend time to figure out the nesting errors