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

export const VehiclePreviewPage = observer(() => {
  const { id } = useParams();
  const { getVehicle, vehicle } = vehicleStore;
  const navigate = useNavigate();

  useEffect(() => {
    (async () => {
      await getVehicle(Number(id));
    })();
  }, [id]);

  return (
    <Paper className="w-full h-full p-3 flex flex-col gap-10">
      <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(`/vehicle/${id}/edit`)}
            startIcon={<Pencil size={20} />}
          >
            Редактировать
          </Button>
          <Button
            variant="contained"
            color="error"
            onClick={() => navigate(`/vehicle/${id}/delete`)}
            startIcon={<Trash2 size={20} />}
          >
            Удалить
          </Button>
        </div> */}
      </div>
      {vehicle[id!] && (
        <div className="flex flex-col gap-10 w-full">
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Системный номер</h1>
            <p>{vehicle[id!]?.vehicle.tail_number}</p>
          </div>
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Тип транспортного средства</h1>
            <p>
              {VEHICLE_TYPES.find(
                (type) => type.value === vehicle[id!]?.vehicle.type
              )?.label || vehicle[id!]?.vehicle.type}
            </p>
          </div>
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Перевозчик</h1>
            <p>{vehicle[id!]?.vehicle.carrier}</p>
          </div>
        </div>
      )}
    </Paper>
  );
});
