/**@jsx React.DOM*/

var BlockedNumberActionItem = createReactClass({
    getInitialState: function() {
        return {
            isButtonLoading: false
        };
    },

    setButtonLoading: function(isLoading) {
        this.setState({ isButtonLoading: isLoading })
    },

    unblockPhoneNumber: function() {
        var PhoneNumber = this.props.blockedNumber;
        var self = this;
        var success = function() {
            self.props.onPhoneUnBlockedSuccess(PhoneNumber)
            self.setButtonLoading(false)
        };

        var error = function() {
            alert("Error unblocking phone number, Please try again later");
            self.setButtonLoading(false);
        };
        self.setButtonLoading(true);
        GhWebClientData.unblockPhoneNumber(PhoneNumber.ID, success, error)
    },

    showConfirmUnBlockPopup: function() {
        GUI.showInfoModal("Unblock this caller",
            "Are you sure, you want to unblock this number?",
            true,
            this.unblockPhoneNumber,
            onCancelUnblockNumberCallback,
            "UNBLOCK",
            true
        );
        function onCancelUnblockNumberCallback() {}
    },

    render: function () {
        const blockedNumber = this.props.blockedNumber;
        if(this.state.isButtonLoading) {
            return (
                <div className="loading-button-state">
                    <span className="spin-element">
                        <i className="fa fa-spinner fa-pulse fa-1x fa-fw" style={{ color: 'green'}}></i>
                    </span>
                </div>
            )
        }
        return (
            <div className="button">
                <button
                    className="btn btn-danger"
                    onClick={this.showConfirmUnBlockPopup.bind(this)}>
                    Unblock
                </button>
            </div>
        )
    }
});

var BlockedPhoneNumbers = createReactClass({
    getInitialState: function() {
        return {
            isButtonLoading: false,
            isComponentLoading: false,
            blockedNumbers: this.props.blockedNumbers || []
        };
    },
    getBlockedNumbersList: function() {
        const User = GhUser.getInstance();
        var self = this;
        this.setState({ isComponentLoading: true })
        var headers =  {
            Authorization: 'OAuth ' + User.getuserAuthToken()
        };

        fetch(GhWebClientData.getMapiURL() + "/vps/" + User.getuserVpsID() + "/blockednumbers", { headers })
        .then(res => res.json())
        .then(function(response) {
            self.setState({ blockedNumbers: [...response] })
        })
        .catch(console.error)
        .finally(function() {
            self.setState({ isComponentLoading: false })
        });
    },
    componentDidMount: function() {
        this.getBlockedNumbersList();
    },
    onPhoneUnBlockedSuccess: function(PhoneNumber) {
        var blockedNumbers = this.state.blockedNumbers.filter(function(number) {
            return number !== PhoneNumber;
        });

        this.setState({ blockedNumbers: [...blockedNumbers] })
    },
    renderEmptyList: function() {
        return (
            <div className="blocked-phone-numbers container">
                You don't have any blocked phone number
            </div>
        )
    },
    renderBlockPhoneNumberButton: function (blockedNumber) {
        return <BlockedNumberActionItem
            blockedNumber={blockedNumber}
            onPhoneUnBlockedSuccess={this.onPhoneUnBlockedSuccess}
        />
    },
    render: function () {
        if(this.state.isComponentLoading) {
            return (
                <div 
                    id="main-page-spin" 
                    className="center-spin" 
                    style={{ marginLeft: -100, marginTop: -96}}>
                    <div id="spin-element" className="center-spin spin-element">
                        <i 
                            className="fa fa-spinner fa-pulse fa-3x fa-fw" 
                            style={{ color: 'green'}} />
                    </div>
                </div>
            )
        }

        if(this.state.blockedNumbers.length == 0) {
            return this.renderEmptyList();
        }

        return (
           <div>
                <table className="table table-responsive blocked-phone-numbers dataTable no-footer">
                    <tbody>
                        {this.state.blockedNumbers.map(function(blockedNumber) {
                            return (
                                <tr role="row" className="row">
                                    <td className="table-column first-column">
                                        <div>
                                            <label>
                                                {window.GUI.formatPhoneNumber(blockedNumber.PhoneNumber)}
                                            </label>
                                        </div>
                                    </td>
                                    <td className="table-column">
                                        <label>
                                            {window.GUI.getFormattedTimeStamp(blockedNumber.DateCreated)}
                                        </label>
                                    </td>
                                    <td className="table-actions-column">
                                        {this.renderBlockPhoneNumberButton(blockedNumber)}
                                    </td>
                                </tr>
                            )
                        }.bind(this))}
                    </tbody>
                </table>
            </div>
        );
    }
});