import React from "react";
import Backbone from "backbone";
import HeaderView from "./header/HeaderView.react";
import ImageLaunchCard from "./launch/ImageLaunchCard.react";
import actions from "actions";
import ViewImageDetails from "./ViewImageDetails.react";
import EditImageDetails from "./EditImageDetails.react";
import VersionsView from "./versions/VersionsView.react";
import modals from "modals";
import { trackAction } from "../../../utilities/userActivity";

export default React.createClass({
    displayName: "ImageDetailsView",

    propTypes: {
        image: React.PropTypes.instanceOf(Backbone.Model).isRequired,
        providers: React.PropTypes.instanceOf(Backbone.Collection),
        identities: React.PropTypes.instanceOf(Backbone.Collection),
        tags: React.PropTypes.instanceOf(Backbone.Collection).isRequired
    },

    getInitialState: function() {
        return {
            isEditing: false
        }
    },

    showLaunchModal: function(e) {
        modals.InstanceModals.launch({
            image: this.props.image,
            initialView: "BASIC_VIEW"
        });
        trackAction("launched-from-image-detail", {});
    },

    handleEditImageDetails: function() {
        this.setState({
            isEditing: true
        })
    },

    handleSaveImageDetails: function(newAttributes) {
        var image = this.props.image;
        actions.ImageActions.updateImageAttributes(image, newAttributes);
        this.setState({
            isEditing: false
        });
    },

    handleCancelEditing: function() {
        this.setState({
            isEditing: false
        });
    },

    render: function() {
        var view,
            versionView = (
            <VersionsView image={this.props.image} />
            );

        if (this.state.isEditing) {
            view = (
                <EditImageDetails image={this.props.image}
                    tags={this.props.tags}
                    providers={this.props.providers}
                    identities={this.props.identities}
                    onSave={this.handleSaveImageDetails}
                    onCancel={this.handleCancelEditing} />
            )
        } else {
            view = (
                <ViewImageDetails image={this.props.image}
                    tags={this.props.tags}
                    providers={this.props.providers}
                    identities={this.props.identities}
                    onEditImageDetails={this.handleEditImageDetails} />
            )
        }
        return (
        <div id="app-detail" className="container">
            <div className="row">
                <div className="col-md-12">
                    <HeaderView image={this.props.image} />
                </div>
            </div>
            <div className="image-content">
                <div className="row">
                    <div className="col-sm-8">
                        {view}
                    </div>
                    <div className="col-sm-4">
                        <ImageLaunchCard image={this.props.image} onLaunch={this.showLaunchModal} />
                    </div>
                </div>
                <div className="versionView">
                    {versionView}
                </div>
            </div>
        </div>
        );
    }
});

@@ -2145,16 +2145,32 @@
 Editing%7D
+%0A               
  /%3E%0A    
@@ -2495,16 +2495,32 @@
 Details%7D
+%0A               
  /%3E%0A    
@@ -2556,16 +2556,20 @@
 eturn (%0A
+    
         
@@ -2616,90 +2616,8 @@
 r%22%3E%0A
-            %3Cdiv className=%22row%22%3E%0A                %3Cdiv className=%22col-md-12%22%3E%0A    
     
@@ -2676,46 +2676,8 @@
     
-            %3C/div%3E%0A            %3C/div%3E%0A
     
@@ -2736,75 +2736,49 @@
     
-%3Cdiv className=%22row%22%3E%0A                    %3Cdiv className=%22col-sm-8%22
+    %3Cdiv style=%7B%7B marginBottom: %2230px%22 %7D%7D
 %3E%0A  
@@ -2873,202 +2873,47 @@
 me=%22
-col-sm-4%22%3E%0A                        %3CImageLaunchCard image=%7Bthis.props.image%7D onLaunch=%7Bthis.showLaunchModal%7D /%3E%0A                    %3C/div%3E%0A                %3C/div%3E%0A                %3Cdiv className=%22
+versionView%22%3E%0A                        %7B
 vers
@@ -2911,34 +2911,33 @@
     %7BversionView
-%22%3E
+%7D
 %0A               
@@ -2937,37 +2937,30 @@
             
-%7BversionView%7D
+%3C/div%3E
 %0A           
@@ -2990,31 +2990,16 @@
  %3C/div%3E%0A
-        %3C/div%3E%0A
         

clean up