"use client";

import MapComponent from "@app/OlMap/MapComponent";
import Timeline from "@components/olmap/HealthRiskAnalysis/Timeline";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
import HealthRiskStatistics from "@components/olmap/HealthRiskAnalysis/HealthRiskStatistics";
import PredictDataPanel from "@components/olmap/HealthRiskAnalysis/PredictDataPanel";
import StyleLegend from "@app/OlMap/Controls/StyleLegend";
import {
  RAINBOW_COLORS,
  RISK_BREAKS,
} from "@components/olmap/HealthRiskAnalysis/types";
import { Box } from "@mui/material";

export default function Home() {
  return (
    <div className="relative w-full h-full overflow-hidden">
      <HealthRiskProvider>
        <MapComponent>
          <MapToolbar
            queryType="realtime"
            hiddenButtons={["style"]}
            HistoryPanel={PredictDataPanel}
          />
          <Timeline />
          <HealthRiskStatistics />
          <Box className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
            <StyleLegend
              layerName="管道"
              layerId="health-risk"
              property="健康风险"
              colors={RAINBOW_COLORS}
              type="line"
              dimensions={Array(RAINBOW_COLORS.length).fill(2)}
              breaks={[0, ...RISK_BREAKS]}
            />
          </Box>
        </MapComponent>
      </HealthRiskProvider>
    </div>
  );
}