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, changeMainSubSys } 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 {
    device: { selectedDeviceMenu, selectedDeviceList, selectedDeviceFloorTags },
    system: { mainSub },
    forgeViewer: { viewer, model },
  } = useSelector((state) => state);

  useEffect(() => {
    if (main_system_tag && sub_system_tag) {
      dispatch(changeMainSubSys({ 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]);

  // 只顯示指定的設備
  // 取得所有 forge dbid
  const getAllDbIds = (model) => {
    const instanceTree = model.getInstanceTree();
    const allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
    return allDbIdsStr.map(id => parseInt(id));
  }
  useEffect(() => {
    if (model && selectedDeviceList.length !== 0) {
      console.log(model)
      const allDbIds = getAllDbIds(model)
      viewer.hide(allDbIds)
      const showDbIds = selectedDeviceList.map((d) => parseInt(d.forge_dbid))
      let showNodeDbId = [];
      selectedDeviceList.forEach(({ device_nodes }) => {
        showNodeDbId = [...showNodeDbId, ...device_nodes.map(({ forge_dbid }) => forge_dbid)]
      })
      viewer.show([...showDbIds, ...showNodeDbId])
    }
  }, [model, selectedDeviceList])

  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-start align-items-center flex-wrap">
                    {selectedDeviceList.map(({ device_guid, full_name, forge_dbid, device_floor }) => (
                      device_floor === floor_tag ?
                        <Card
                        bg="dark"
                        key={device_guid}
                        className="mb-3 ms-4"
                        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" deviceList={ selectedDeviceList } />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Monitor;