import React from 'react';
import PropTypes from 'prop-types';

import { Card, NgIf, Icon, EventEmitter, EventReceiver } from '../../components/';
import { pathBuilder } from '../../helpers/';
import "./thing.scss";

@EventEmitter
@EventReceiver
export class NewThing extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            name: null,
            type: null,
            icon: null
        };

        this._onEscapeKeyPress = (e) => {
            if(e.keyCode === 27) this.onDelete();
        };
    }

    componentDidMount(){
        window.addEventListener("keydown", this._onEscapeKeyPress);
        this.props.subscribe("new::file", () => {
            this.onNew("file");
        });
        this.props.subscribe("new::directory", () => {
            this.onNew("directory");
        });
    }
    componentWillUnmount(){
        window.removeEventListener("keydown", this._onEscapeKeyPress);
        this.props.unsubscribe("new::file");
        this.props.unsubscribe("new::directory");
    }

    onNew(type){
        if(this.state.type === type){
            this.onDelete();
        }else{
            this.setState({type: type, name: "", icon: type});
        }
    }

    onDelete(){
        this.setState({type: null, name: null, icon: null});
    }

    onSave(e){
        e.preventDefault();
        if(this.state.name !== null){
            this.props.emit("file.create", pathBuilder(this.props.path, this.state.name, this.state.type), this.state.type);
            this.onDelete();
        }
    }

    render(){
        return (
            <div>
              <NgIf cond={this.state.type !== null} className="component_thing">
                <Card className="mouse-is-hover highlight">
                  <Icon className="component_updater--icon" name={this.state.icon} />
                  <span className="file-details">
                    <form onSubmit={this.onSave.bind(this)}>
                      <input onChange={(e) => this.setState({name: e.target.value})} value={this.state.name} type="text" autoFocus/>
                    </form>
                  </span>
                  <span className="component_action">
                    <div className="action">
                      <div>
                        <Icon className="component_updater--icon" name="delete" onClick={this.onDelete.bind(this)} />
                      </div>
                    </div>
                  </span>
                </Card>
              </NgIf>
            </div>
        );
    };
}

NewThing.propTypes = {
    accessRight: PropTypes.object.isRequired,
    sort: PropTypes.string.isRequired
};