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

export const StationPreviewPage = observer(() => {
  const { id } = useParams();
  const { stationPreview, getStationPreview } = stationsStore;
  const navigate = useNavigate();
  const { language } = languageStore;

  useEffect(() => {
    (async () => {
      if (id) {
        await getStationPreview(Number(id));
      }
    })();
  }, [id, language]);

  return (
    <Paper className="w-full  p-3  py-5 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>{stationPreview[id!]?.[language]?.data.name}</p>
        </div>

        <div className="flex flex-col gap-2">
          <h1 className="text-lg font-bold">Системное название</h1>
          <p>{stationPreview[id!]?.[language]?.data.system_name}</p>
        </div>

        <div className="flex flex-col gap-2">
          <h1 className="text-lg font-bold">Направление</h1>
          <p
            className={`${
              stationPreview[id!]?.[language]?.data.direction
                ? "text-green-500"
                : "text-red-500"
            }`}
          >
            {stationPreview[id!]?.[language]?.data.direction
              ? "Прямой"
              : "Обратный"}
          </p>
        </div>

        {stationPreview[id!]?.[language]?.data.address && (
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Адрес</h1>
            <p>{stationPreview[id!]?.[language]?.data.address}</p>
          </div>
        )}

        {stationPreview[id!]?.[language]?.data.description && (
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Описание</h1>
            <p>{stationPreview[id!]?.[language]?.data.description}</p>
          </div>
        )}

        {id && (
          <LinkedSights
            parentId={Number(id)}
            fields={[
              { label: "Название", data: "name" },
              { label: "Описание", data: "description" },
            ]}
            type="show"
          />
        )}
      </div>
    </Paper>
  );
});