import { Paper } from "@mui/material";
import { cityStore, languageStore, mediaStore } from "@shared";
import { LanguageSwitcher, MediaViewer } from "@widgets";
import { observer } from "mobx-react-lite";
import { ArrowLeft } from "lucide-react";
import { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";

export const CityPreviewPage = observer(() => {
  const { id } = useParams();
  const { getCity, city, setEditCityData } = cityStore;
  const { oneMedia, getOneMedia } = mediaStore;
  const navigate = useNavigate();
  const { language } = languageStore;

  useEffect(() => {
    (async () => {
      if (id) {
        const ruData = await getCity(id as string, "ru");
        const enData = await getCity(id as string, "en");
        const zhData = await getCity(id as string, "zh");

        setEditCityData(ruData.name, ruData.country_code, ruData.arms, "ru");
        setEditCityData(enData.name, enData.country_code, enData.arms, "en");
        setEditCityData(zhData.name, zhData.country_code, zhData.arms, "zh");

        await getOneMedia(ruData.arms as string);
      }
    })();
  }, [id]);

  return (
    <Paper className="w-full h-full p-3 flex flex-col gap-10">
      <LanguageSwitcher />
      <div className="flex justify-between items-center">
        <button
          className="flex items-center gap-2"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft size={20} />
          Назад
        </button>
      </div>
      <div className="flex flex-col gap-10 w-full">
        <div className="flex flex-col gap-2">
          <h1 className="text-lg font-bold">Название</h1>
          <p>{city[id!]?.[language]?.name}</p>
        </div>

        <div className="flex flex-col gap-2">
          <h1 className="text-lg font-bold">Страна</h1>
          <p>{city[id!]?.[language]?.country}</p>
        </div>
        <div className="flex flex-col gap-2 pb-10">
          <h1 className="text-lg font-bold">Герб</h1>
          <div className="w-[300px] h-[200px]">
            <MediaViewer
              media={{
                id: oneMedia?.id as string,
                media_type: oneMedia?.media_type as number,
                filename: oneMedia?.filename,
              }}
            />
          </div>
        </div>
      </div>
    </Paper>
  );
});
