import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { Container, Row, Col, Card, ButtonGroup, Button } from "react-bootstrap";
import ForgeModel from "@COM/forges/ForgeModel";
import { fetchSelectedDeviceMenu, fetchSelectedDeviceList, fetchSelectedDevFlTags } from "@STORE";
import defdev from "@ASSET/img/defdev.png";
function Monitor() {
  const params = useParams().systemId; // main_sub
  const [main_system_tag, sub_system_tag] = params.split("_");
  const dispatch = useDispatch();
  const {
    buildingInfo: { selectedBuiTag },
    device: { selectedDeviceMenu, selectedDeviceList, selectedDeviceFloorTags },
    system: { mainSub },
  } = useSelector((state) => state);

  useEffect(() => {
    if (selectedBuiTag && main_system_tag && sub_system_tag) {
      dispatch(fetchSelectedDeviceMenu({ main_system_tag, sub_system_tag }));
      dispatch(fetchSelectedDeviceList({ sub_system_tag }));
      dispatch(fetchSelectedDevFlTags({ sub_system_tag }));
    }
    // 載入資料
  }, [main_system_tag, sub_system_tag, selectedBuiTag]);
  return (
    <>
      <Container
        fluid
        className="mb-3 py-1 d-flex align-items-center"
        style={{ background: "#505050" }}
      >
        <span className="fs-4 text-white-50 mx-4">
          {mainSub.length !== 0 &&
            mainSub.find((s) => params.includes(s.sub_system_tag))?.full_name}
        </span>
        <ButtonGroup size="sm">
          <Button variant="secondary">總覽</Button>
          {selectedDeviceFloorTags.length !== 0 &&
            selectedDeviceFloorTags.map(({ floor_tag, floor_guid }) => (
              <Button variant="secondary" key={floor_guid}>
                {floor_tag}
              </Button>
            ))}
        </ButtonGroup>
      </Container>
      <Container fluid className="pe-2 ps-5">
        <Row>
          <Col md={6}>
            {selectedDeviceMenu?.left_system_url &&
            window.location.href.includes("http://220.132.206.5") ? (
              <iframe
                src={selectedDeviceMenu.left_system_url}
                className="w-100 h-100"
                title="設計圖稿"
              ></iframe>
            ) : (
              selectedDeviceFloorTags.map(({ floor_tag, floor_guid }) => (
                <Row className="g-3" key={floor_guid}>
                  <Col md={1}>
                    <Button className="px-4 py-2 text-white">{floor_tag}</Button>
                  </Col>
                  <Col className="d-flex justify-content-evenly align-items-center flex-wrap">
                    {selectedDeviceList.map(({ device_guid, full_name, forge_dbid }) => (
                      <Card
                        bg="dark"
                        key={device_guid}
                        className="mb-3"
                        style={{ maxWidth: "45%" }}
                      >
                        <Card.Body>
                          <Card.Title>
                            <img src={defdev} className="w-25 h-25 me-3" />
                            {full_name}
                          </Card.Title>
                          <Card.Text>
                            <span className="text-secondary me-4">功率 kW</span>
                            <Card.Link
                              className="text-white text-decoration-none"
                              data-forgeId={forge_dbid}
                            >
                              詳細內容
                            </Card.Link>
                          </Card.Text>
                        </Card.Body>
                      </Card>
                    ))}
                  </Col>
                </Row>
              ))
            )}
          </Col>
          <Col md={6}>
            <ForgeModel forgeHeight="90vh" sprites={selectedDeviceList} />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Monitor;