import React, { Component, PropTypes } from 'react';
{{#if wantSCSSModules}}
import cssModules from 'react-css-modules';
{{/if}}
{{#if wantGraphQL}}
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
{{/if}}
{{#if wantActionsAndReducer}}
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as {{ properCase name }}ActionCreators from './actions';
{{/if}}
{{#if wantSCSSModules}}
import styles from './index.module.scss';
{{/if}}
{{#if wantSelectors}}
import { select{{ properCase name }} } from './selectors';
{{/if}}
{{#if wantStyledComponents}}
import { StyledWrapper } from './styles';
{{/if}}

class {{ properCase name }}Container extends Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      {{#if wantSCSSModules}}
      <div className={{curly true}}styles.{{ camelCase name }}{{curly}}>
      {{else}}
      <div>
      {{/if}}
      </div>
    );
  }
}

{{ properCase name }}Container.propTypes = {
  // isLoading: PropTypes.bool.isRequired,
};

{{#if wantActionsAndReducer}}
{{#if wantSelectors}}
const mapStateToProps = (state) => ({
  // myProp: select{{properCase name}}(state.{{ camelCase name }}),
});
{{else}}
// mapStateToProps :: {State} -> {Props}
const mapStateToProps = (state) => ({
  // myProp: state.myProp,
});
{{/if}}

// mapDispatchToProps :: Dispatch -> {Action}
const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(
    {{ properCase name }}ActionCreators,
    dispatch
  ),
});
{{/if}}
{{#if wantSCSSModules}}

const Container = cssModules({{ properCase name }}Container, styles);
{{else}}

const Container = {{ properCase name }}Container;
{{/if}}

{{#if wantGraphQL}}
const {{ camelCase name }}Query = gql`
  query {{ camelCase name }} {
    {{ camelCase name }} {
      __typename
    }
  }
`;

const ContainerWithData = graphql({{ camelCase name }}Query, {
  props: ({ data: { loading, error, {{ camelCase name }} } }) => ({
    {{ camelCase name }},
    loading,
    error,
  }),
})(Container);

const {{ camelCase name }}Mutation = gql`
  mutation {{ camelCase name }} {
    {{ camelCase name }} {
      __typename
    }
  }
`;

const ContainerWithMutation = graphql({{ camelCase name }}Mutation)(ContainerWithData);
{{/if}}
{{#if wantActionsAndReducer}}
  {{#if wantGraphQL}}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ContainerWithMutation);
  {{else}}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Container);
{{/if}}
{{else}}

export default Container;
{{/if}}