/**
Form component
**/

import { withStyles } from 'material-ui/styles';
import { styles } from './styles';
import React from 'react';
import PropTypes from 'prop-types';
import Divider from 'material-ui/Divider';
import FormActions from '../FormActions';
import Grid from 'material-ui/Grid';

const { node, string, bool, array } = PropTypes;

class Form extends React.Component {
  static defaultProps = {
    actions: true,
    noValidate: false,
  };

  constructor(props) {
    super();
    const { data = {}, validationRules = {} } = props;
    this.state = {
      data,
    };
    this.renderChild = this.renderChild.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.onFieldChange = this.onFieldChange.bind(this);
  }

  onFieldChange(name, value, opts) {
    this.setState({
      data: { ...this.state.data, [name]: value },
    });
  }

  renderChild(child, key) {
    const { props } = child;
    const { uiOptions } = props;
    const { xs, md, lg } = uiOptions
      ? uiOptions
      : {
          xs: 6,
          md: 4,
          lg: 4,
        };

    return (
      <Grid item key={key} xs={xs}>
        {React.cloneElement(child, {
          ...props,
          onChange: this.onFieldChange,
        })}
      </Grid>
    );
  }

  handleSubmit(e) {
    const { data } = this.state;
    const { onSubmit } = this.props;
    console.log(data);

    // onSubmit(data);
    return false;
  }

  render() {
    const {
      children,
      actions,
      classes,
      spacing = 16,
      alignItems = 'flex-start',
      ...rest
    } = this.props;

    return (
      <form className={classes.root} {...rest}>
        <Grid
          container
          className={classes.container}
          spacing={spacing}
          alignItems={alignItems}
        >
          {children.length > 1
            ? children.map((child, key) => {
                return this.renderChild(child, key);
              })
            : this.renderChild(children)}
        </Grid>
        {actions === true ? (
          <Grid
            container
            className={classes.container}
            spacing={16}
            alignItems="flex-start"
          >
            <Grid item xs={12}>
              <FormActions handleSubmit={this.handleSubmit} />
            </Grid>
          </Grid>
        ) : null}
      </form>
    );
  }
}

Form.propTypes = {
  noValidate: bool,
  autoComplete: bool,
  title: string,
  actions: bool,
  children: node.isRequired,
};

export default withStyles(styles)(Form);

=============

/**
Field component
**/

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { styles } from './styles';
import TextField from '../TextField';
import SelectField from '../SelectField';
import Switch from '../Switch';
import Checkbox from '../Checkbox';

const { string, array, bool, object } = PropTypes;

class Field extends React.Component {
  static defaultProps = {
    type: 'text',
  };
  constructor() {
    super();
  }
  render() {
    const { type, selectoptions, uioptions, ...rest } = this.props;

    switch (type) {
      case 'switch':
        return <Switch uioptions={uioptions} {...rest} />;
      case 'checkbox':
        return <Checkbox uioptions={uioptions} {...rest} />;
      case 'select':
        return (
          <SelectField
            uioptions={uioptions}
            selectoptions={selectoptions}
            {...rest}
          />
        );
      default:
        return <TextField type={type} uioptions={uioptions} {...rest} />;
    }

    return null;
  }
}

Field.propTypes = {
  label: string.isRequired,
  name: string.isRequired,
  required: bool,
  uioptions: object,
  selectoptions: array,
  type: string,
};

export default withStyles(styles)(Field);

======

/**
Button - material-ui
**/

import { withStyles } from 'material-ui/styles';
import { styles } from './styles';
import React from 'react';
import PropTypes from 'prop-types';
import MuiButton from 'material-ui/Button';

const { string, func, object, node, oneOfType } = PropTypes;

const Button = props => {
  const { style, children, classes, onClick } = props;

  return (
    <MuiButton color="primary" style={style} onClick={onClick} {...props}>
      {children}
    </MuiButton>
  );
};

Button.propTypes = {
  style: object,
  children: oneOfType([string, node]),
  onClick: func,
};

export default withStyles(styles)(Button);

====
/**
Checkbox - material-ui
**/

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import MuiCheckbox from 'material-ui/Checkbox';
import { FormGroup, FormControlLabel } from 'material-ui/Form';
import { styles } from './styles';

const { string } = PropTypes;

const Checkbox = props => {
  const { classes, value, label, uioptions, ...rest } = props;
  return (
    <FormControlLabel
      control={
        <MuiCheckbox className={classes.checkbox} value={value} {...rest} />
      }
      label={label}
    />
  );
};

Checkbox.propTypes = {
  value: string.isRequired,
};

export default withStyles(styles)(Checkbox);

===
/**
Form actions component
**/

import { withStyles } from 'material-ui/styles';
import { styles } from './styles';
import React from 'react';
import PropTypes from 'prop-types';
import Button from '../Button';

const { array, func } = PropTypes;

class FormActions extends React.Component {
  static defaultProps = {
    actions: ['submit'],
  };
  constructor() {
    super();
  }
  render() {
    const { classes, actions, handleSubmit, ...rest } = this.props;

    return (
      <section className={classes.actions}>
        {actions.map((action, key) => {
          return (
            <Button key={key} onClick={handleSubmit}>
              {action}
            </Button>
          );
        })}
      </section>
    );
  }
}

FormActions.propTypes = {
  actions: array.isRequired,
  handleSubmit: func,
  handleClose: func,
};

export default withStyles(styles)(FormActions);

==

/**
FormGroup component
**/

import React from 'react';
import PropTypes from 'prop-types';
import { FormGroup as MuiGroup } from 'material-ui/Form';

const { array } = PropTypes;

const FormGroup = props => {
  const { children } = props;
  return <MuiGroup>{children}</MuiGroup>;
};

FormGroup.propTypes = {
  children: array.isRequired,
};

export default FormGroup;
==

/**
SelectField
**/

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Select from 'material-ui/Select';
import Input, { InputLabel } from 'material-ui/Input';
import { MenuItem } from 'material-ui/Menu';
import { FormControl, FormHelperText } from 'material-ui/Form';
import { styles } from './styles';

const { string, array, func, bool } = PropTypes;

class SelectField extends React.Component {
  constructor() {
    super();
    this.state = {
      options: [],
      value: 0,
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    const { name, onChange } = this.props;
    const { value } = e.target;

    this.setState({
      value,
    });

    onChange(name, value);
  }
  render() {
    const {
      classes,
      label,
      name,
      id,
      selectoptions,
      onChange,
      ...rest
    } = this.props;
    const { value } = this.state;

    return (
      <FormControl className={classes.root}>
        <InputLabel htmlFor={id}>{label}</InputLabel>
        <Select
          value={value}
          renderValue={() => this.state.value}
          onChange={e => this.handleChange(e)}
          inputProps={{
            name: name,
            id: id,
          }}
          {...rest}
        >
          {selectoptions &&
            selectoptions.map((option, idx) => {
              return (
                <MenuItem key={idx} value={option.value}>
                  {option.text}
                </MenuItem>
              );
            })}
        </Select>
      </FormControl>
    );
  }
}

SelectField.propTypes = {
  label: string.isRequired,
  name: string.isRequired,
  selectoptions: array.isRequired,
  controlFunc: func,
};

export default withStyles(styles)(SelectField);

===
/**
TextField
**/

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { styles } from './styles';
import MuiTextField from 'material-ui/TextField';

const { string, bool, func } = PropTypes;

const TextField = props => {
  const { classes, name, id, onChange, uioptions, ...rest } = props;

  return (
    <MuiTextField
      className={classes.root}
      onChange={e => onChange(name, e.target.value)}
      {...rest}
    />
  );
};

TextField.propTypes = {
  id: string,
  helperText: string,
  multiline: bool,
  fullWidth: bool,
  onChange: func,
  label: string.isRequired,
  name: string.isRequired,
};

export default withStyles(styles)(TextField);