import { useState } from "react";
import MapLayout from "@/components/map/Layout";
import CustomToolbar from "@/components/common/CustomToolbar";
import CustomClock from "@/components/common/CustomClock";
import TextInfoPanel from "@/components/common/TextInfoPanel";
import CustomFlyTo from "./CustomFlyTo";
import FormPanel from "./FormPanel";
import HeatmapImageLayer from "./HeatmapImageLayer";
import Legend from "./Legend";

export default function DomainFive() {
  const [show, setShow] = useState(false);

  return (
    <MapLayout>
      <div className="title">三极联动影响东亚夏季风</div>
      <CustomToolbar />
      <CustomClock />
      <CustomFlyTo />
      <div className="left-panel one">
        <TextInfoPanel
          content={`利用39个CMIP6数值模拟数据训练卷积神经网络，利用NOAA20世纪再分析数据进行迁移学习、ERA5再分析数据进行测试，从而预测东亚夏季风。预测结果的热力图可视化表明尽管热带大洋对东亚夏季风的影响是最强的，然而不论是北极、南极还是青藏高原均显示有显著的前期信号（春季），这也表明地球三极可以协同影响东亚夏季风。关于东亚夏季风的预测一直是个难题。近期，我们利用机器学习识别了东亚夏季风的影响因子。
          地球三极的协同影响在东亚夏季风的归因图中得到了很好的体现：尽管热带大洋对东亚夏季风的影响是最强的，然而不论是北极、南极还是青藏高原均显示有显著的前期信号（春季），这也表明地球三极可以协同影响东亚夏季风。`}
        />
      </div>
      <div className="right-panel">
        <FormPanel setShow={setShow} />
      </div>
      {show && <HeatmapImageLayer />}
      <Legend />
    </MapLayout>
  );
}
