import { Box, Tab, Tabs } from "@mui/material";
import { InformationTab, LeaveAgree, RightWidgetTab } from "@widgets";
import { LeftWidgetTab } from "@widgets";
import { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import {
  articlesStore,
  authStore,
  cityStore,
  editSightStore,
  LoadingSpinner,
  selectedCityStore,
} from "@shared";
import { useBlocker, useParams } from "react-router-dom";

function a11yProps(index: number) {
  return {
    id: `sight-tab-${index}`,
    "aria-controls": `sight-tabpanel-${index}`,
  };
}

export const EditSightPage = observer(() => {
  const [value, setValue] = useState(0);
  const [isLoadingData, setIsLoadingData] = useState(true);
  const { sight, getSightInfo, needLeaveAgree, getRightArticles } = editSightStore;
  const { getArticles } = articlesStore;

  useEffect(() => {
    selectedCityStore.setIsLocked(true);
    return () => selectedCityStore.setIsLocked(false);
  }, []);

  const { id } = useParams();
  const { getCities } = cityStore;

  let blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      needLeaveAgree && currentLocation.pathname !== nextLocation.pathname
  );

  const handleChange = (_: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  useEffect(() => {
    const fetchData = async () => {
      if (id) {
        setIsLoadingData(true);
        try {
          if (!authStore.me) {
            await authStore.getMeAction().catch(() => undefined);
          }
          if (authStore.canRead("cities")) {
            await getCities("ru");
          } else {
            await authStore.fetchMeCities().catch(() => undefined);
          }
          await getSightInfo(+id, "ru");
          await getSightInfo(+id, "en");
          await getSightInfo(+id, "zh");
          await getArticles("ru");
          await getArticles("en");
          await getArticles("zh");
          // Загружаем данные правого виджета перед завершением загрузки
          await getRightArticles(+id);
        } finally {
          setIsLoadingData(false);
        }
      } else {
        setIsLoadingData(false);
      }
    };
    fetchData();
  }, [id]);

  return (
    <Box
      sx={{
        width: "100%",
        display: "flex",
        flexDirection: "column",
        minHeight: "100vh",
      }}
    >
      <Box
        sx={{
          borderBottom: 1,
          borderColor: "divider",
          display: "flex",
          justifyContent: "center",
        }}
      >
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="sight tabs"
          sx={{
            width: "100%",
            "& .MuiTabs-flexContainer": {
              justifyContent: "center",
            },
          }}
        >
          <Tab sx={{ flex: 1 }} label="Общая информация" {...a11yProps(0)} />
          <Tab sx={{ flex: 1 }} label="Левый виджет" {...a11yProps(1)} />
          <Tab sx={{ flex: 1 }} label="Правый виджет" {...a11yProps(2)} />
        </Tabs>
      </Box>

      {isLoadingData ? (
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            minHeight: "60vh",
          }}
        >
          <LoadingSpinner message="Загрузка данных достопримечательности..." />
        </Box>
      ) : (
        sight.common.id !== 0 && (
          <div className="flex-1">
            <InformationTab value={value} index={0} />
            <LeftWidgetTab value={value} index={1} />
            <RightWidgetTab value={value} index={2} />
          </div>
        )
      )}

      {blocker.state === "blocked" ? <LeaveAgree blocker={blocker} /> : null}
    </Box>
  );
});