import { Box, Tab, Tabs } from "@mui/material";
import { InformationTab, RightWidgetTab } from "@widgets";
import { LeftWidgetTab } from "@widgets";
import { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import { articlesStore, languageStore, sightsStore } from "@shared";
import { 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 { sight, getSight } = sightsStore;
  const { getArticles } = articlesStore;
  const { language } = languageStore;
  const { id } = useParams();

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

  useEffect(() => {
    const fetchData = async () => {
      if (id) {
        await getSight(Number(id));
        await getArticles();
      }
    };
    fetchData();
  }, [id, language]);

  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>

      {sight && (
        <div className="flex-1">
          <InformationTab value={value} index={0} />
          <LeftWidgetTab data={sight} value={value} index={1} />
          <RightWidgetTab data={sight} value={value} index={2} />
        </div>
      )}
    </Box>
  );
});