import { Stack, Typography, Button } from "@mui/material";
import { useNavigate, useNavigationType } from "react-router";
import { MediaViewer } from "@widgets";
import { useMapData } from "./MapDataContext";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import { authInstance } from "@shared";

export const LeftSidebar = observer(() => {
  const navigate = useNavigate();
  const navigationType = useNavigationType(); // PUSH, POP, REPLACE
  const { routeData } = useMapData();
  const [carrierThumbnail, setCarrierThumbnail] = useState<string | null>(null);
  const [carrierLogo, setCarrierLogo] = useState<string | null>(null);
  useEffect(() => {
    async function fetchCarrierThumbnail() {
      if (routeData?.carrier_id) {
        const { city_id, logo } = (
          await authInstance.get(`/carrier/${routeData.carrier_id}`)
        ).data;
        const { arms } = (await authInstance.get(`/city/${city_id}`)).data;
        setCarrierThumbnail(arms);
        setCarrierLogo(logo);
      }
    }
    fetchCarrierThumbnail();
  }, [routeData?.carrier_id]);

  const handleBack = () => {
    if (navigationType === "PUSH") {
      navigate(-1);
    } else {
      navigate("/route");
    }
  };

  return (
    <Stack direction="column" width="300px" p={2} bgcolor="primary.main">
      <button
        onClick={handleBack}
        type="button"
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          gap: 10,
          color: "#fff",
          backgroundColor: "#222",
          borderRadius: 10,
          height: 40,
          width: "100%",
          border: "none",
          cursor: "pointer",
        }}
      >
        <p>Назад</p>
      </button>

      <Stack
        direction="column"
        alignItems="center"
        justifyContent="center"
        my={10}
      >
        <div
          style={{
            maxWidth: 200,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 10,
          }}
        >
          {carrierThumbnail && (
            <MediaViewer
              media={{
                id: carrierThumbnail,
                media_type: 1, // Тип "Фото" для логотипа
                filename: "route_thumbnail",
              }}
              fullWidth
              fullHeight
            />
          )}
          <Typography sx={{ mb: 2, color: "#fff" }} textAlign="center">
            При поддержке Правительства
          </Typography>{" "}
        </div>
      </Stack>

      <Stack
        direction="column"
        alignItems="center"
        justifyContent="center"
        my={10}
        spacing={2}
      >
        <Button variant="outlined" color="warning" fullWidth>
          Достопримечательности
        </Button>
        <Button variant="outlined" color="warning" fullWidth>
          Остановки
        </Button>
      </Stack>

      <Stack
        direction="column"
        alignItems="center"
        maxHeight={150}
        justifyContent="center"
        my={10}
      >
        {carrierLogo && (
          <MediaViewer
            media={{
              id: carrierLogo,
              media_type: 1, // Тип "Фото" для логотипа
              filename: "route_thumbnail_logo",
            }}
            fullHeight
          />
        )}
      </Stack>

      <Typography
        variant="h6"
        textAlign="center"
        mt="auto"
        sx={{ color: "#fff" }}
      >
        #ВсемПоПути
      </Typography>
    </Stack>
  );
});