import { startML, useLastMLRun } from "../api.js";
import { Button, Popover, Spin, Tooltip } from "antd";
import { InfoCircleOutlined, LoadingOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";

const TASK_STATUSES = {
  finished: "Перерасчет ML завершен"
}
export function LastMLRun() {
  const { data } = useLastMLRun();
  const [isUpdating, setIsUpdating] = useState(false);

  useEffect(() => {
    setIsUpdating(data?.task_status !== TASK_STATUSES.finished);
  }, [data]);

  const startUpdating = async () => {
    setIsUpdating(true);
    try {
      await startML();
    } catch (e) {
      setIsUpdating(false);
    }
  }

  const lastMLRunRender = () => {
    if (!isUpdating) return (
      <>
        <div className="text-xs text-grey z-10 bg-white-background rounded-xl px-2 py-0.5 space-y-3">
          Последнее обновление системы
        </div>
        <div className="text-xs text-grey z-10 bg-white-background rounded-xl px-2 py-0.5 space-y-3">
          {data?.last_time && new Date(data?.last_time).toLocaleString('ru-RU')}
        </div>
        <Button type="text" className="flex items-center p-2 text-[#C50000] hover:text-[#C50000] text-xs" onClick={() => startUpdating()}>
          Обновить систему
        </Button>
      </>
    );

    return (
      <div className="flex items-center gap-2">
        <div>Идет обновление системы...</div>
        <Spin />
      </div>
    )

  };

  return (
    <Popover
      content={lastMLRunRender}
      trigger="click"
      placement={"leftBottom"}
      color="#ffffff"
    >
      <Tooltip title="Инфо">
        <Button className="absolute bottom-[64px] right-[20px] flex items-center justify-center p-3">
          {!isUpdating
            ? <InfoCircleOutlined className="w-4 h-4" />
            :  <Spin indicator={<LoadingOutlined style={{ fontSize: 16, color: "#000000" }} spin />} />
          }
        </Button>
      </Tooltip>
    </Popover>

  );
}