import React, { Component } from 'react';
import fetch from 'node-fetch';
import PropTypes from 'prop-types';
import { Alert, Badge } from 'react-bootstrap';

import ManageServerSettings from '../components/manageserver/ManageServerSettings';

export default class ManageServer extends Component {
    constructor(props) {
        super(props)
        
        this.state = {
            loading: true,
            data: null
        }
        
        this.handleInput = this.handleInput.bind(this);
    }
    
    componentDidMount() {
        fetch(`http://localhost:8088/v1/get/guild/${this.props.match.params.id}`)
            .then(res => res.json())
            .then(res => this.setState({
                loading: false,
                data: res.message ? null : res
            }))
            .catch(() => this.setState({ loading: false }));
    }
    
    handleInput(event) {
        const eventId = event.target.id;
        const value = event.target.value;
        
        this.setState(prevState => ({
            data: {
                ...prevState.data,
                [eventId]: value
            }
        }));
    }
    
    render() {
        if (this.state.loading) {
            return(
                <h1>Loading...</h1>
            );
        } else if(!this.state.data) {
            return(
                // <MDBAlert color="warning">This bot is not in this server</MDBAlert>
                <Alert variant="warning">Aki is not in this server!</Alert>
            );
        } else {
            return(
                <React.Fragment>
                    <h1><strong>{this.state.data.name}</strong></h1>
                    <Badge variant="primary">{`${this.state.data.members} Members`}</Badge>&nbsp;
                    <Badge variant="success">{`Owner: ${this.state.data.owner}`}</Badge>
                    
                    <hr />
                    
                    <ManageServerSettings data={this.state.data} handleInput={this.handleInput} guild={this.props.match.params.id} />
                </React.Fragment>
            )
        }
    }
}

ManageServer.propTypes = {
    user: PropTypes.object
}