import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
  LoadingIndicator,
  MainCarousel,
  SpotlightArticles,
  MainAside,
} from 'components';
import * as LandingActionCreators from './actions';
import cssModules from 'react-css-modules';
import styles from './index.module.scss';
import Section from 'grommet-udacity/components/Section';
import Box from 'grommet-udacity/components/Box';
import { ErrorAlert } from 'components';

class Landing extends Component {
  constructor() {
    super();
    this.handleCloseErrorAlert = this.handleCloseErrorAlert.bind(this);
  }
  componentDidMount() {
    const {
      loadFeaturedArticles,
    } = this.props.actions;
    loadFeaturedArticles();
  }
  handleCloseErrorAlert() {
    const {
      clearLandingErrors,
    } = this.props.actions;
    clearLandingErrors();
  }
  render() {
    const {
      isLoading,
      carouselImages,
      featuredArticles,
      errors,
      user,
    } = this.props;
    return (
      <div className={styles.landing}>
        {errors && errors.length > 0 &&
          <ErrorAlert errors={errors} onClose={this.handleCloseErrorAlert} />
        }
        {isLoading ?
          <Section
            align="center"
            justify="center"
            className={styles.loadingBox}
          >
            <LoadingIndicator isLoading={isLoading} />
          </Section>
        :
          <Section
            primary
            alignContent="center"
            align="center"
            className={styles.mainSection}
          >
            <Box direction="row">
              <Box
                basis={user ? '2/3' : 'full'}
                pad="medium"
                align="center"
                justify="center"
                className={styles.mainContent}
              >
                <MainCarousel images={carouselImages} />
                {featuredArticles && featuredArticles.length > 0 &&
                  <SpotlightArticles articles={featuredArticles} />
                }
              </Box>
              {user &&
                <MainAside user={user} />
              }
            </Box>
          </Section>
        }
      </div>
    );
  }
}

Landing.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  actions: PropTypes.object.isRequired,
  carouselImages: PropTypes.array.isRequired,
  featuredArticles: PropTypes.array,
  errors: PropTypes.array,
  user: PropTypes.object,
};

// mapStateToProps :: {State} -> {Props}
const mapStateToProps = (state) => ({
  isLoading: state.landing.isLoading,
  carouselImages: state.landing.carouselImages,
  featuredArticles: state.landing.featuredArticles,
  errors: state.landing.errors,
  user: state.app.user,
});

// mapDispatchToProps :: Dispatch -> {Action}
const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(
    LandingActionCreators,
    dispatch
  ),
});

const Container = cssModules(Landing, styles);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Container);

@@ -1,12 +1,506 @@
+// Copyright Ryan Collins, 2016%0A// Released under the MIT Open Source License%0A//%0A// %5C______   %5C___.__._____    ____ %5C_   ___ %5C  ____ %7C  %7C %7C  %7C %7C__%7C ____   ______%0A//  %7C       _%3C   %7C  %7C%5C__  %5C  /    %5C/    %5C  %5C/ /  _ %5C%7C  %7C %7C  %7C %7C  %7C/    %5C /  ___/%0A//  %7C    %7C   %5C%5C___  %7C / __ %5C%7C   %7C  %5C     %5C___(  %3C_%3E )  %7C_%7C  %7C_%7C  %7C   %7C  %5C%5C___ %5C %0A//  %7C____%7C_  // ____%7C(____  /___%7C  /%5C______  /%5C____/%7C____/____/__%7C___%7C  /____  %3E%0A//         %5C/ %5C/          %5C/     %5C/        %5C/                         %5C/     %5C/     %0A//%0A%0A
 import React

add copyright notice to landing container