/*
 *
 * {{ properCase name }}
 *
 */

import React from 'react';
import { connect } from 'react-redux';
{{#if wantHeaders}}
import Helmet from 'react-helmet';
{{/if}}
{{#if wantActionsAndReducer}}
import select{{properCase name}} from './selectors';
{{/if}}
{{#if wantCSS}}
import styles from './styles.css';
{{/if}}

export class {{ properCase name }} extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      {{#if wantCSS}}
      <div className={{curly true}}styles.{{ camelCase name }}{{curly}}>
      {{else}}
      <div>
      {{/if}}
        {{#if wantHeaders}}
        <Helmet
          title="{{properCase name}}"
          meta={{curly true}}[
            {{curly true}} name: 'description', content: 'Description of {{properCase name}}' {{curly}},
          ]{{curly}}
        />
        {{/if}}
      This is {{properCase name}} container !
      </div>
    );
  }
}

{{#if wantActionsAndReducer}}
const mapStateToProps = select{{properCase name}}();
{{/if}}

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

{{#if wantActionsAndReducer}}
export default connect(mapStateToProps, mapDispatchToProps)({{ properCase name }});
{{else}}
export default connect(mapDispatchToProps)({{ properCase name }});
{{/if}}