import React, { Component } from 'react';
import PropTypes from 'prop-types';
import fetch from 'node-fetch';
import { Card, Alert, Button, InputGroup, FormControl } from 'react-bootstrap';

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>
                <Card style={{ width: '18rem' }}>
                    <Card.Body>
                        <Card.Title>Server Settings</Card.Title>
                        <Card.Text>
                            {this.state.error &&
                                <Alert variant="danger">{this.state.error}</Alert>
                            }
                            {this.state.success &&
                                <Alert variant="success">Updated server settings successfully.</Alert>
                            }
                            
                            <InputGroup aria-label="Server name" value={this.props.data.name} onChange={this.props.handleInput} className="mb-3">
                                <FormControl id="name" placeholder="Server name" aria-label="Server name"/>
                            </InputGroup>
                            <Button variant="primary" onClick={this.handleSave.bind(this)} disabled={this.state.disabled}>Save</Button>
                        </Card.Text>
                    </Card.Body>
                </Card>

                {/* <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
}