/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */
import './sshKeyCard.scss';
import React, {Component} from 'react';
import TextInput from 'widgets/form_controls/textInput.jsx';
import SshKeyActions from './sshKeyActions.js';
import Button from 'widgets/button/rw.button.js';

export default class SshKeyCard extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.state.isExpanded = false;
    }
    cancelEdit(name) {
            SshKeyActions.cancelEditSshKeyPair(name)
    }
    render() {
        let {className, ...props} = this.props;
        let editMode = props.editMode.toString().toUpperCase();
        let editToolsHTML = null;
        let isInEditMode = null;
        let isInCreateMode = null;
        className = "sshKeyCard " + className;
        isInEditMode = editMode == "TRUE" ? true : false;
        isInCreateMode = editMode == "CREATE" ? true : false;
        if(isInEditMode) {
            editToolsHTML = (
                <div className="flex">
                    <span className="oi sshKeyCard-button" data-glyph="circle-check" onClick={props.updateEditSshKeyPair(props.name)}></span>
                    <span className="oi sshKeyCard-button" data-glyph="circle-x" onClick={props.cancelEditSshKeyPair(props.name)}></span>
                </div>
            )
        } else {
            if(isInCreateMode) {
                editToolsHTML = (
                    <div className="flex">
                    <Button className="dark" label="Add Key" onClick={props.saveEditSshKeyPair({name: props.name, key: props.value})}></Button>
                    </div>
                );
            } else {
                editToolsHTML = (
                    <div className="flex">
                        <span className="oi sshKeyCard-button" data-glyph="pencil" title="Edit SSH Key" onClick={props.editKey}></span>
                        <span className="oi sshKeyCard-button" data-glyph="trash" title="Delete SSH Key"  onClick={props.deleteKey}></span>
                    </div>
                );
            }
        }
        return (
            <div className={className}>
                <TextInput className="sshKeyCard-thumbnail " value={props.name} readonly={true && !isInCreateMode} label="name"
                 onChange={props.updateSshKeyPair(props.name, 'name')}
                />
                <div className="sshKeyCard-body">
                    <TextInput type="textarea"
                        className="sshKeyCard-key"
                        value={props.value}
                        readonly={!isInEditMode && !isInCreateMode} label="key"
                        onChange={props.updateSshKeyPair(props.name, 'key')}
                    />
                </div>
                <div className="sshKeyCard-controls">
                    {
                        editToolsHTML
                    }
                </div>
            </div>
        )
    }
}
SshKeyCard.defaultProps = {
    className: null,
    editMode: false,
    saveKey: function(e) {
        console.log('saving key');
    },
    cancelEdit: function(e) {
        console.log('canceling edit');
    },
    editKey: function(e) {
        console.log('Starting edit')
    },
    deleteKey: function(e) {
        console.log('deleting key')
    }


}