"use client";

import dynamic from "next/dynamic";

import { MapPanelSkeleton, MapTimelineSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
import StyleLegend from "@components/olmap/core/Controls/StyleLegend";
import {
  RAINBOW_COLORS,
  RISK_BREAKS,
} from "@components/olmap/HealthRiskAnalysis/types";
import { Box } from "@mui/material";

const Timeline = dynamic(
  () => import("@components/olmap/HealthRiskAnalysis/Timeline"),
  {
    loading: () => <MapTimelineSkeleton />,
  },
);
const HealthRiskStatistics = dynamic(
  () =>
    import("@components/olmap/HealthRiskAnalysis/HealthRiskStatistics"),
  {
    loading: () => <MapPanelSkeleton variant="health-risk-analysis" />,
  },
);
const PredictDataPanel = dynamic(
  () => import("@components/olmap/HealthRiskAnalysis/PredictDataPanel"),
  {
    loading: () => null,
  },
);

export default function Home() {
  return (
    <HealthRiskProvider>
      <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>
    </HealthRiskProvider>
  );
}