import React from 'react';
import superagent from 'superagent';
import constants from '../CloudApi/Constants.js';
import MenuPageWrapper from '../Wrappers/MenuPageWrapper.jsx';

import {
    Segment,
    Header,
    Image,
    Icon,
    Message,
    Button,
    Table,
    Form,
    Label } from 'semantic-ui-react'

export default class CreateRoom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            version: '0.95.0',
            name: null,
            description: null,
            category: constants.RoomCategories[0].value,
            environment: constants.RoomEnvironments[0].value,
            size: constants.RoomSizes[0].value,
            content: null,
            messages: [],
            loading: false
        };
    }
    
    onChange(e, { name, value }) {
        this.setState({ [name]: value })
    }

    onAddContent(e) {
        e.preventDefault();
        this.setState({content : { type: "fileId", value: "aaa1" }});
    }

    onContentTypeChanged(e, { name, value }) {
        this.setState({content: { type: value, value: this.state.content.value }});
    }

    onContentChanged(e, { name, value }) {
        this.setState({content: { type: this.state.content.type, value }});
    }

    onRemoveContent(e) {
        this.setState({ content : null });
    }

    async onCreateRoom(e) {
        e.preventDefault();
        try {
            const payload = {
                version: this.state.version,
                name: this.state.name,
                description: this.state.description,
                category: this.state.category,
                environment: this.state.environment,
                size: this.state.size,
                content: { [this.state.content.type]: this.state.content.value },
                visibility: "Public"
            };

            this.setState({loading: true});
            const room = await superagent.post(`/api/create_room`).accept('json').send(payload);
            console.log(room);
        } catch (e) {
            console.log(e);
        } 
        this.setState({
            loading: false
        });
    }

    render() {

        return (
            <MenuPageWrapper title="Create Room" menuItems={[]} loading={false}>
                <Segment basic>
                    <Segment secondary padded size='huge' textAlign="left" loading={this.state.loading}>
                        {this.state.messages.map(message => {
                            return (
                                <Message error header={message.name} content={message.msg} />
                            )
                        })}
                        <Form size='small' onSubmit={this.onCreateRoom.bind(this)}>
                            <Form.Group>
                                <Form.Input required label='Version' value={this.state.version} name="version" onChange={this.onChange.bind(this)} />
                            </Form.Group>
                            <Form.Group widths="equal">
                                <Form.Input required label='Room name' value={this.state.name} name="name" onChange={this.onChange.bind(this)} />
                                <Form.Input label='Room description' value={this.state.description} name="description" onChange={this.onChange.bind(this)} />
                            </Form.Group>
                            <Form.Group widths="equal">
                                <Form.Select required label="Category" size="small" name="category" value={this.state.category} options={constants.RoomCategories} onChange={this.onChange.bind(this)} />
                                <Form.Select required label="Environment" size="small" name="environment" value={this.state.environment} options={constants.RoomEnvironments} onChange={this.onChange.bind(this)} />
                                <Form.Select required label="Size" size="small" name="size" value={this.state.size} options={constants.RoomSizes} onChange={this.onChange.bind(this)} />
                            </Form.Group>

                            <Header as="h4">Content (optional)</Header>
                            <Form.Group inline>
                                <Button onClick={this.onAddContent.bind(this)}>Add content</Button>
                            </Form.Group>

                            {this.state.content && (
                                <Form.Group inline>
                                    <label>{this.state.content.name}</label>
                                    <Form.Select required label="Content Type" size="small" name="type" value={this.state.content.type} options={constants.ContentTypes} onChange={this.onContentTypeChanged.bind(this)} />
                                    <Form.Input required value={this.state.content.value} onChange={this.onContentChanged.bind(this)} />
                                    <Button onClick={this.onRemoveContent.bind(this)}><Icon name='delete' /></Button>
                                </Form.Group>
                            )}

                            <Segment basic textAlign="center">
                                <Button size='huge' primary icon='right arrow' labelPosition='right' content='Create Room' type='submit' />
                            </Segment>
                        </Form>
                    </Segment>
                </Segment>
            </MenuPageWrapper>
        )
    }
}