import React from 'react';
import ModalHelpers from 'components/modals/ModalHelpers';
import SSHKeyUpload from 'components/modals/SSHKeyUpload.react';
import actions from 'actions';
import stores from 'stores';

export default React.createClass({

    getInitialState: function() {
        var profile = stores.ProfileStore.get();
        return {
            profile: profile,
            ssh_keys: stores.SSHKeyStore.getAll(),
            use_ssh_keys: profile.get('settings')['use_ssh_keys'],
        };
    },

    updateState: function() {
        this.setState(this.getInitialState());
    },

    componentDidMount: function() {
        stores.ProfileStore.addChangeListener(this.updateState);
        stores.SSHKeyStore.addChangeListener(this.updateState);
    },

    componentWillUnmount: function() {
        stores.ProfileStore.removeChangeListener(this.updateState);
        stores.SSHKeyStore.removeChangeListener(this.updateState);
    },

    handleChangeSSHPreference: function(event) {
        var isChecked = event.target.checked;
        // Update the store
        actions.ProfileActions.updateProfileAttributes(this.state.profile, {
            use_ssh_keys: isChecked
        });
        // Optimistically update ui
        this.setState({
            use_ssh_keys: isChecked
        });
    },

    destroySSHKey: function(sshKey) {

        // EmitChange is responsible for triggering the rerender, which
        // happens after the network request.

        // Optimistically delete the key
        stores.SSHKeyStore.remove(sshKey);
        sshKey.destroy({
            success: function() {
                stores.SSHKeyStore.emitChange();
            },
            error: function() {
                // Re-add the key to store if delete failed
                stores.SSHKeyStore.add(sshKey);
                stores.SSHKeyStore.emitChange();
            }
        });
    },

    launchSSHKeyUploadModal: function(user) {
        ModalHelpers.renderModal(SSHKeyUpload, {
            user: user
        }, function() {});
    },

    renderSSHKeyRow: function(sshKey) {
        return (
            <tr key={ sshKey.get( 'id') }>
                <td>{ sshKey.get('name') }</td>
                <td style={{ wordWrap: "break-word", whiteSpace: "normal" }}>{ sshKey.get('pub_key').replace(/\n/g, " ") }</td>
                <td>
                    <a onClick={ this.destroySSHKey.bind(this, sshKey) }>
                        <i style={{ color: "crimson"}} className="glyphicon glyphicon-trash" />
                    </a>
                </td>
            </tr>
        );
    },

    render: function() {
        var profile = this.state.profile;
        var ssh_keys = this.state.ssh_keys;
        var use_ssh_keys = this.state.use_ssh_keys;

        return (
            <div>
                <h3>SSH Configuration</h3>
                <div>
                    <input type="checkbox" checked={use_ssh_keys} onChange={this.handleChangeSSHPreference}/> &nbsp;&nbsp;Enable ssh access into launched instances.
                </div>
                <div>
                    <table className="clearfix table" style={{ tableLayout: "fixed" }}>
                        <thead>
                            <tr>
                                <th style={{ width: "100px"}}>name</th>
                                <th>public key</th>
                                <th style={{ width: "30px"}}></th>
                            </tr>
                        </thead>
                        <tbody>
                            { ssh_keys ? ssh_keys.map(this.renderSSHKeyRow) : [] }
                            <tr>
                                <td>
                                    <a onClick={ this.launchSSHKeyUploadModal.bind(this, profile.get( 'user')) }>
                                        <i className="glyphicon glyphicon-plus" />
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                <p id="helpBlock" className="help-block">
                    * Keys removed or added will not have immediate effect.
                    The changes will take effect on the next resume or deploy
                    of an instance.
                </p>
                </div>
            </div>
        );
    }

});

@@ -205,16 +205,48 @@
 ores';%0A%0A
+import globals from 'globals';%0A%0A
 export d
@@ -373,16 +373,52 @@
 eturn %7B%0A
+            displayMoreInfo: false,%0A
         
@@ -826,32 +826,1008 @@
 State);%0A    %7D,%0A%0A
+    onDisplayMoreInfo(e) %7B%0A        e.preventDefault();%0A        this.setState(%7B displayMoreInfo: true %7D);%0A    %7D,%0A%0A    renderSupportLink() %7B%0A        return (%0A            %3Ca href=%7B %60mailto:$%7Bglobals.SUPPORT_EMAIL%7D%60 %7D%3E%7B %60 $%7Bglobals.SUPPORT_EMAIL%7D %60 %7D%3C/a%3E%0A        );%0A    %7D,%0A%0A    renderMoreInfo() %7B%0A        var displayMoreInfo = this.state.displayMoreInfo;%0A%0A        if (displayMoreInfo) %7B%0A            return (%0A            %3Cp%3E%0A               Removing a key from this list, doesn't remove it from the%0A               instance.  If you need to remove a key from an existing%0A               instance, please edit /root/.ssh/authorized_keys inside the%0A               instance, or contact Atmosphere support at %0A               %7B this.renderSupportLink() %7D for assistance.%0A            %3C/p%3E%0A            )%0A        %7D%0A%0A        return (%0A        %3Cp%3E%0A            Click %3Ca onClick=%7Bthis.onDisplayMoreInfo%7D%3E here %3C/a%3E%0A            to learn about securely removing keys.%0A        %3C/p%3E%0A        )%0A    %7D,%0A%0A
     componentWil
@@ -3914,174 +3914,437 @@
 %3Cdiv
-%3E%0A                    %3Cinput type=%22checkbox%22 checked=%7Buse_ssh_
+ style=%7B%7BmaxWidth: %22600px%22%7D%7D%3E%0A                    %3Cp%3E%0A                        Use the table below to list ssh 
 keys
-%7D onChange=%7Bthis.handleChangeSSHPreference%7D/%3E &nbsp;&nbsp;Enable ssh access into launched instances.
+ that you would%0A                        like to be present when you launch an instance.%0A                        Changes do not effect running instances. They will take%0A                        effect on the next resume or deploy of an instance.%0A                    %3C/p%3E%0A                    %7B  this.renderMoreInfo() %7D
 %0A   
@@ -5320,24 +5320,24 @@
    %3C/tbody%3E%0A
+
             
@@ -5357,277 +5357,8 @@
 le%3E%0A
-                %3Cp id=%22helpBlock%22 className=%22help-block%22%3E%0A                    * Keys removed or added will not have immediate effect.%0A                    The changes will take effect on the next resume or deploy%0A                    of an instance.%0A                %3C/p%3E%0A
     

Fix user confusion over removed keys