import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { useAppSelector, useAppDispatch } from "../store/store";
import PageTitle from "../components/PageTitle";
import { useEffect, useMemo, useState } from "react";
import { api } from "../api/client";
import { Button, Tag } from "antd";
import { TableTag } from "../components/TableTag/TableTag";
import { TAG_PRESETS } from "../components/TableTag/presets";

export function ConsolidationView() {
  const [searchParams, setSearchParams] = useSearchParams();
  const { cons_id } = useParams();
  //   const files = useAppSelector((state) => state.files.currentOpenFiles);
  const navigate = useNavigate();
  const [versionData, setVersionData] = useState(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    async function fetchVersionCard() {
      if (!cons_id) return;
      setLoading(true);
      const res = await api.get(`/consolidations/versions/${cons_id}`);
      const another_res = await api.get(
        `/consolidations/versions/${cons_id}/osv`,
      );
      setVersionData(res);
      setLoading(false);
    }
    fetchVersionCard();
  }, [cons_id]);
  const dispatch = useAppDispatch();

  const desc = useMemo(() => {
    return "";
  }, []);
  const headerContent = useMemo(() => {
    if (!versionData) return { location: "", header: "" };
    const year = versionData.year;
    const quarter = versionData.quarter;
    const company_name = versionData.company_group.name;
    let header = `${company_name} - ${year} ${quarter}`;
    let location = `Отчётность > ${company_name} > ${year} · ${quarter}`;
    console.log({ header, location });
    return { header, location };
  }, [versionData]);
  return (
    <div
      style={{
        padding: 12,
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      {!loading && versionData !== null && (
        <>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              //   alignItems: "center",
            }}
          >
            <PageTitle {...headerContent} description={desc} backable />
            <div
              style={{
                display: "flex",
                gap: 10,
                alignItems: "baseline",
                fontSize: 12,
              }}
            >
              <span style={{ color: "rgb(102, 112, 133)" }}>Статус отчета</span>
              <TableTag
                {...TAG_PRESETS.green}
                style={{ fontSize: 11 }}
                text={"Верифицирован"}
              />

              <Button type="default" disabled size="small">
                Изменить статус
              </Button>
            </div>
          </div>
          <main
            style={{
              flex: "1 1 auto",
              minHeight: 0,
              overflow: "auto",
              backgroundColor: "white",
              borderRadius: 12,
            }}
          ></main>
        </>
      )}
    </div>
  );
}