import React, { useState } from 'react';
import { Row, Col, Modal, Button } from 'react-bootstrap';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList';

function Home() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <Row className="mr-0">
      <Col className="list" md={5}> 
        <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
          <Tab eventKey="closed" title="내 채팅" >
            <ClosedList />
          </Tab>
          <Tab eventKey="open" title="공개방" >
            <OpenList />
          </Tab>
        </Tabs>

      </Col>
      <Col style={{ padding: "0" }}>
        <Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
          생성
        </Button>

        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>방 생성</Modal.Title>
          </Modal.Header>
          <Modal.Body>여기에 form 입력</Modal.Body>
          <Modal.Footer>
            <Button variant="primary" onClick={handleClose}>
              생성
            </Button>
          </Modal.Footer>
        </Modal>
      </Col>
    </Row>
  );
}

export default Home;