text: import React, {useState } from 'react'
  import { Button, Modal, InputGroup, FormControl, Form, OverlayTrigger, Tooltip, Nav, Row, Col, Tab } from 'react-bootstrap'
  import CheckListTable from '../checkListTable'
  import HouseKeeping from '../../../svg/maid.svg'
  
  
  const HouseKeeping = ({user, firebase}) =>{
  
      const [list, setList] = useState(false)
  
      const handleClose = () => setList(false)
      const handleShow = () => setList(true)
  
      return(
          <div style={{
              display: "flex",
              flexFlow: "row",
              justifyContent: "center"
          }}>
          <OverlayTrigger
              placement="bottom"
              overlay={
                <Tooltip id="title">
                  Conciergerie
                </Tooltip>
              }>
                  <img src={HouseKeeping} className="icon" alt="todolist" onClick={handleShow} style={{width: "30%"}} />
          </OverlayTrigger>
  
              <Modal
                  show={list}
                  size="lg"
                  aria-labelledby="contained-modal-title-vcenter"
                  centered
                  onHide={handleClose}>
              <Modal.Header closeButton className="bg-light">
                  <Modal.Title id="contained-modal-title-vcenter">
                  Conciergerie
                  </Modal.Title>
              </Modal.Header>
              <Modal.Body
              style={{overflow: "auto"}}>
                  <Tab.Container defaultActiveKey="matin">
                  <Row>
                      <Col sm={2}>
                      <Nav variant="pills" className="flex-column">
                          <Nav.Item>
                          <Nav.Link eventKey="matin">Serviette</Nav.Link>
                          </Nav.Item>
                          <Nav.Item>
                          <Nav.Link eventKey="soir">Savon</Nav.Link>
                          </Nav.Item>
                          <Nav.Item>
                          <Nav.Link eventKey="nuit">Papier Toilette</Nav.Link>
                          </Nav.Item>
                          <Nav.Item>
                          <Nav.Link eventKey="matin">Sèche-cheveux</Nav.Link>
                          </Nav.Item>
                          <Nav.Item>
                          <Nav.Link eventKey="soir">Coussin</Nav.Link>
                          </Nav.Item>
                          <Nav.Item>
                          <Nav.Link eventKey="nuit">Couverture</Nav.Link>
                          </Nav.Item><Nav.Item>
                          <Nav.Link eventKey="matin">Fer à repasser</Nav.Link>
                          </Nav.Item>
                          <Nav.Item>
                          <Nav.Link eventKey="soir">Lit Bébé</Nav.Link>
                          </Nav.Item>
                      </Nav>
                      </Col>
                      <Col sm={10}>
                      <Tab.Content>
                          <Tab.Panel eventKey="Serviette">
                              {!!firebase && !!user && 
                              <CheckListTable shift="towel" firebase={firebase} user={user} />}
                          </Tab.Panel>
                          <Tab.Panel eventKey="Savon">
                          {!!firebase && !!user && 
                              <CheckListTable shift="soap" firebase={firebase} user={user} />}
                          </Tab.Panel>
                          <Tab.Panel eventKey="Papier Toilette">
                          {!!firebase && !!user && 
                              <CheckListTable shift="toilet-paper" firebase={firebase} user={user} />}
                          </Tab.Panel>
                          <Tab.Panel eventKey="Sèche-cheveux">
                              {!!firebase && !!user && 
                              <CheckListTable shift="hair" firebase={firebase} user={user} />}
                          </Tab.Panel>
                          <Tab.Panel eventKey="soir">
                          {!!firebase && !!user && 
                              <CheckListTable shift="soir" firebase={firebase} user={user} />}
                          </Tab.Panel>
                          <Tab.Panel eventKey="nuit">
                          {!!firebase && !!user && 
                              <CheckListTable shift="nuit" firebase={firebase} user={user} />}
                          </Tab.Panel>
                          <Tab.Panel eventKey="matin">
                              {!!firebase && !!user && 
                              <CheckListTable shift="matin" firebase={firebase} user={user} />}
                          </Tab.Panel>
                          <Tab.Panel eventKey="soir">
                          {!!firebase && !!user && 
                              <CheckListTable shift="soir" firebase={firebase} user={user} />}
                          </Tab.Panel>
                      </Tab.Content>
                      </Col>
                  </Row>
              </Tab.Container>
              </Modal.Body>
              </Modal>
      </div>
      )
  }
  
  export default HouseKeeping