import React from 'react';
import { withRouter } from 'react-router';
import Reflux from 'reflux';
import Helmet from 'react-helmet';
import _ from 'lodash';

import HostingFilesStore from './HostingFilesStore';
import HostingFilesActions from './HostingFilesActions';
import HostingPublishDialogActions from './HostingPublishDialogActions';

import { RaisedButton } from 'material-ui';
import { colors as Colors } from 'material-ui/styles';
import { InnerToolbar, Container, Show } from '../../common';
import HostingFilesList from './HostingFilesList';
import HostingDialog from './HostingDialog';
import HostingPublishDialog from './HostingPublishDialog';

const HostingFilesView = React.createClass({
  mixins: [
    Reflux.connect(HostingFilesStore)
  ],

  componentDidMount() {
    const { hostingId } = this.props.params;

    HostingFilesActions.setHostingId(hostingId);
    HostingFilesActions.fetch();
  },

  isDefaultHosting() {
    const { hostingDetails } = this.state;

    if (hostingDetails) {
      return _.includes(hostingDetails.domains, 'default');
    }

    return false;
  },

  handleUploadFiles(event) {
    event.stopPropagation();
    const { files } = event.target;

    if (files && files.length) {
      const filesToUpload = _.map(files, this.extendFilePath);

      this.setState({ filesToUpload });
    }
  },

  handleClearFiles() {
    this.setState({
      filesToUpload: []
    });
  },

  handleShowPublishDialog() {
    const { hostingId, instanceName } = this.props.params;

    HostingPublishDialogActions.showDialog({ id: hostingId, instanceName });
  },

  handleSendFiles() {
    const { filesToUpload } = this.state;
    const { hostingId } = this.props.params;

    HostingFilesActions.uploadFiles(hostingId, filesToUpload);
  },

  extendFilePath(file) {
    const firstSlashIndex = file.webkitRelativePath.indexOf('/');

    file.path = file.webkitRelativePath.substring(firstSlashIndex + 1);

    return file;
  },

  render() {
    const { isLoading, hideDialogs, items, filesToUpload, lastFileIndex, currentFileIndex, isUploading } = this.state;
    const hasFilesToUpload = filesToUpload.length > 0;
    const isDefaultHosting = this.isDefaultHosting();

    return (
      <div>
        <Helmet title="Website Hosting" />
        <HostingDialog />
        <HostingPublishDialog />

        <InnerToolbar title="Website Hosting">
          <Show if={items.length && !isLoading}>
            <RaisedButton
              label={isDefaultHosting ? 'Published' : 'Publish'}
              onTouchTap={this.handleShowPublishDialog}
              primary={true}
              disabled={isDefaultHosting}
              disabledBackgroundColor={Colors.green500}
              disabledLabelColor="#FFF"
            />
          </Show>
        </InnerToolbar>

        <Container>
          <HostingFilesList
            isUploading={isUploading}
            lastFileIndex={lastFileIndex}
            currentFileIndex={currentFileIndex}
            handleClearFiles={this.handleClearFiles}
            filesCount={filesToUpload.length}
            handleUploadFiles={this.handleUploadFiles}
            handleSendFiles={this.handleSendFiles}
            hasFiles={hasFilesToUpload}
            isLoading={isLoading}
            items={items}
            hideDialogs={hideDialogs}
          />
        </Container>
      </div>
    );
  }
});

export default withRouter(HostingFilesView);

@@ -1088,32 +1088,206 @@
 rn false;%0A  %7D,%0A%0A
+  handleBackClick() %7B%0A    const %7B router, params %7D = this.props;%0A    const redirectPath = %60/instances/$%7Bparams.instanceName%7D/hosting/%60;%0A%0A    router.push(redirectPath);%0A  %7D,%0A%0A
   handleUploadFi
@@ -2526,16 +2526,26 @@
 rToolbar
+%0A         
  title=%22
@@ -2560,16 +2560,222 @@
 Hosting%22
+%0A          style=%7B%7B padding: 0 %7D%7D%0A          backButton=%7Btrue%7D%0A          backFallback=%7Bthis.handleBackClick%7D%0A          forceBackFallback=%7Btrue%7D%0A          backButtonTooltip=%22Go back to Hostings List%22%0A        
 %3E%0A      

Add a Go Back button to hosting files tree view