import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Button, Offcanvas } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCommentDots, faCommentSlash } from "@fortawesome/free-solid-svg-icons";
import { fetchBuiAlarmStateByBaja } from "@STORE";
function AlarmOffcanvas() {
  const dispatch = useDispatch();
  const { selectedBuiArea, selectedBuiTag } = useSelector((state) => state.buildingInfo);
  // alarm
  const [showAlarm, setShowAlarm] = useState(false);
  const getAlarmList = () => {
    dispatch(fetchBuiAlarmStateByBaja(selectedBuiArea, selectedBuiTag));
    setShowAlarm(!showAlarm);
  };
  return (
    <>
      <Button
        variant="link"
        className="d-flex flex-column align-items-center justify-content-center mx-3 text-decoration-none text-white"
        onClick={getAlarmList}
      >
        <FontAwesomeIcon icon={showAlarm ? faCommentSlash : faCommentDots} size="2x" />
        <span className="mt-1">{showAlarm ? "隱藏警告" : "顯示警告"}</span>
      </Button>
      <Offcanvas
        className="opacity-75"
        show={showAlarm}
        onHide={() => {
          setShowAlarm(false);
        }}
        placement="end"
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you have chosen. Like,
          text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

export default AlarmOffcanvas;