import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { MDBCard, MDBCardHeader, MDBCardBody, MDBInput, MDBAlert, MDBBtn } from 'mdbreact';
import fetch from 'node-fetch';

export default class ManageServerSettings extends Component {
    state = {
        error: null,
        success: false,
        disabled: false
    }
    
    handleSave() {
        this.setState({
            error: null,
            success: false,
            disabled: true
        });
        
        fetch(`http://localhost:8088/v1/post/guild-name/${this.props.guild}`, {
            method: 'POST',
            credentials: 'include',
            headers: {
                'Authorization': process.env.REACT_APP_AUTHORIZATION,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: this.props.data.name
            })
        })
        .then(res => res.json())
        .then(res => {
            if (res.message) return this.setState({ error: res.message, disabled: false });
            
            this.setState({ success: true });
        })
        .catch(err => {
            console.log(err);
            this.setState({ error: 'An unknown error occured' });
        });
    }
    
    render() {
        return(
            <React.Fragment>
                <MDBCard>
                    <MDBCardHeader>
                        <h3>Server Settings</h3>
                    </MDBCardHeader>
                    <MDBCardBody>
                        {this.state.error &&
                            <MDBAlert color="danger">{this.state.error}</MDBAlert>
                        }
                        {this.state.success &&
                            <MDBAlert color="success">Updated server settings successfully</MDBAlert>
                        }
                        
                        <MDBInput id="name" label="Server name" value={this.props.data.name} onChange={this.props.handleInput} />
                        <MDBBtn color="dark" onClick={this.handleSave.bind(this)} disabled={this.state.disabled}>Save</MDBBtn>
                    </MDBCardBody>
                </MDBCard>
            </React.Fragment>
        )
    }
}

ManageServerSettings.propTypes = {
    data: PropTypes.object,
    handleInput: PropTypes.func,
    guild: PropTypes.string
}