/*
 * Copyright (c) 2016-present, Parse, LLC
 * All rights reserved.
 *
 * This source code is licensed under the license found in the LICENSE file in
 * the root directory of this source tree.
 */
import CodeSnippet   from 'components/CodeSnippet/CodeSnippet.react';
import DashboardView from 'dashboard/DashboardView.react';
import EmptyState    from 'components/EmptyState/EmptyState.react';
import FileTree      from 'components/FileTree/FileTree.react';
import history       from 'dashboard/history';
import React         from 'react';
import stringCompare from 'lib/stringCompare';
import styles        from 'dashboard/Data/CloudCode/CloudCode.scss';
import subscribeTo   from 'lib/subscribeTo';
import Toolbar       from 'components/Toolbar/Toolbar.react';

function getPath(params) {
  return params.splat;
}

export default class CloudCode extends DashboardView {
  constructor() {
    super();
    this.section = 'Core';
    this.subsection = 'Cloud Code';

    this.state = {
      files: undefined,
      source: undefined
    };
  }

  componentWillMount() {
    this.fetchSource(this.context.currentApp, getPath(this.props.params));
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (this.context !== nextContext) {
      this.fetchSource(nextContext.currentApp, getPath(nextProps.params));
    }
  }

  fetchSource(app, fileName) {
    app.getLatestRelease().then(
      (release) => {
        this.setState({ files: release.files, source: undefined });

        if (!release.files || Object.keys(release.files).length === 0) {
          // Releases is empty. Show EmptyState
          return;
        }

        if (!fileName || release.files[fileName] === undefined) {
          // Means we're still in /cloud_code/. Let's redirect to /cloud_code/main.js
          history.replace(this.context.generatePath('cloud_code/main.js'))
        } else {
          // Means we can load /cloud_code/<fileName>
          app.getSource(fileName).then(
            (source) => this.setState({ source: source }),
            () => this.setState({ source: undefined })
          );
        }
      },
      () => this.setState({ files: undefined, source: undefined })
    );
  }

  renderSidebar() {
    let current = getPath(this.props.params) || '';
    let files = this.state.files;
    if (!files) {
      return null;
    }
    let paths = [];
    for (let key in files) {
      paths.push(key);
    }
    return (
      <div style={{ overflowX: 'auto' }}>
        <div style={{ borderLeft: '1px solid #3e87b2' }}>
          <FileTree
            linkPrefix={this.context.generatePath('cloud_code/')}
            current={current}
            files={paths} />
        </div>
      </div>
    );
  }

  renderContent() {
  	let toolbar = null;
    let content = null;
    let fileName = getPath(this.props.params);

    if (!this.state.files || Object.keys(this.state.files).length === 0) {
      content = (
        <div className={styles.empty}>
          <EmptyState
            title={'You haven\u2019t deployed any code yet.'}
            icon='folder-outline'
            description={'When you deploy your cloud code, you\u2019ll be able to see your files here'}
            cta='Get started with Cloud Code'
            action={() => window.location = 'https://parse.com/docs/cloudcode/guide'} />
        </div>
      );
    } else {
      if (fileName) {
        toolbar = <Toolbar
  	      section='Cloud Code'
  	      subsection={fileName} />;

        let source = this.state.files[fileName];
        if (source && source.source) {
          content = (
            <div className={styles.content}>
              <CodeSnippet source={source.source} language='javascript' />
            </div>
          );
        }
      }
    }

    return (
      <div className={styles.source}>
        {content}
        {toolbar}
      </div>
    );
  }
}
