import React from 'react';
import { Button, Form, Container, Row, Col, Image } from 'react-bootstrap';
import { HubConnectionBuilder } from '@microsoft/signalr';
import staffImage from './image/职员nan.png';
import azureImage from './image/azure.jpg'

const apiBaseUrl = process.env.REACT_APP_API_BASE_URL;

class NoticeForm extends React.Component {
    constructor(props) {
        super(props);
    
        this.state = {noticeText: "", formText: ""};

        this.submitNotice = this.submitNotice.bind(this);
        this.changeNotice = this.changeNotice.bind(this);
    }

    componentDidMount() {
        const connection = new HubConnectionBuilder()
            .withUrl(`${apiBaseUrl}/api`)
            .build();

        connection.on('newNotice', this.newNotice);
        connection.start()
            .then(() => {
                console.log("connected");
            })
            .catch(error => {
                console.error(error.message)
            });
    }

    changeNotice(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    submitNotice(event) {
        event.preventDefault();

        fetch(`${apiBaseUrl}/api/notice`, {
            method: 'POST', // or 'PUT'
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(this.state.formText),
        });

        this.setState({
            formText: ""
        });
    }

    render() {
        return (
            <Container fluid>
                <Row>
                    <Col xs={{ span: 2, offset: 10 }}  md={{ span: 1, offset: 11 }}>
                        <Image src={staffImage} roundedCircle fluid className="border border-primary my-3" />
                    </Col>
                </Row>
                <Row>
                    <Col md="6" className="mb-3">
                        <Form onSubmit={this.submitNotice}>
                            <Form.Group controlId="ControlTextarea">
                                <Form.Control className="" style={{backgroundColor: 'rgba(255, 255, 255, 6%)'}} value={this.state.formText} onChange={this.changeNotice} name="formText" as="textarea" rows="10" placeholder="输入通知消息..."/>
                            </Form.Group>
                            <Button variant="primary" type="submit" className="float-right">通知</Button>
                        </Form>
                    </Col>
                    <Col md="6">
                        <Image src={azureImage} fluid />
                    </Col>
                </Row>
            </Container>
        );
    }
}

export default NoticeForm;