/*
 *
 * {{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 wantMessages}}
import { FormattedMessage } from 'react-intl';
import messages from './messages';
{{/if}}
{{#if wantCSS}}
import styles from './styles.scss';
{{/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}}
      {{#if wantMessages}}
        <FormattedMessage {...messages.header} />
      {{/if}}
      </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}}