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

export const CountryPreviewPage = observer(() => {
  const { id } = useParams();
  const { getCountry, country, setEditCountryData } = countryStore;
  const navigate = useNavigate();
  const { language } = languageStore;

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

        setEditCountryData(ruData.name, "ru");
        setEditCountryData(enData.name, "en");
        setEditCountryData(zhData.name, "zh");
      }
    })();
  }, [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 className="flex gap-2">
          <Button
            variant="contained"
            color="primary"
            onClick={() => navigate(`/user/${id}/edit`)}
            startIcon={<Pencil size={20} />}
          >
            Редактировать
          </Button>
          <Button
            variant="contained"
            color="error"
            onClick={() => navigate(`/user/${id}/delete`)}
            startIcon={<Trash2 size={20} />}
          >
            Удалить
          </Button>
        </div> */}
      </div>
      {country[id!]?.[language] && (
        <div className="flex flex-col gap-10 w-full">
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Название</h1>
            <p>{country[id!]?.ru?.name}</p>
          </div>
        </div>
      )}
    </Paper>
  );
});