import React, { useState } from 'react'
import axios from 'axios';
import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors'


function EnterRoom(props) {
    const [enterCode, setEnterCode] = useState('');
    const [error, setError] = useState('');
    
    function handleChange(event) {
        const { name, value } = event.target
        setEnterCode(value)
        console.log(enterCode)
    }
    
    async function handleSubmit(event) {
        event.preventDefault()
        try {
            setError('')
            await axios.post('/room/enterRoom', enterCode)
            props.enterChatRoom(enterCode)
            setEnterCode('')
        } catch (error){
            catchErrors(error, setError)
        }
    }

    return (
        <>
            <Modal show={props.showEnter} onHide={props.handleCloseEnter}>
                <Modal.Header closeButton>
                    <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={handleSubmit}>
                        <Form.Group as={Row} controlId="formCodeE">
                            <Form.Label column sm={4}>참여 코드</Form.Label>
                            <Col>
                                <Form.Control name='roomCode' type='text' value={enterCode} onChange={handleChange} />
                            </Col>
                        </Form.Group>
                        <Form.Group as={Row}>
                            <Col sm={{ span: 5, offset: 4 }}>
                                <Button type="submit">참가</Button>
                            </Col>
                        </Form.Group>
                    </Form>
                </Modal.Body>
            </Modal>
        </>
    )
}

export default EnterRoom