import { Stack, Typography, Box, Button } from "@mui/material";
import { useShow } from "@refinedev/core";
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
import { LinkedItems } from "../../components/LinkedItems";
import {
  StationItem,
  VehicleItem,
  SightItem,
  sightFields,
  stationFields,
  vehicleFields,
} from "./types";
import { useNavigate, useParams } from "react-router";
import { observer } from "mobx-react-lite";

export const RouteShow = observer(() => {
  const { query } = useShow({});
  const { data, isLoading } = query;
  const record = data?.data;
  const { id } = useParams();
  const navigate = useNavigate();

  const fields = [
    { label: "Перевозчик", data: "carrier" },
    { label: "Номер маршрута", data: "route_number" },
    {
      label: "Направление маршрута",
      data: "route_direction",
      render: (value: number[][]) => (
        <Typography style={{ color: value ? "#48989f" : "#7f6b58" }}>
          {value ? "прямое" : "обратное"}
        </Typography>
      ),
    },
    {
      label: "Координаты маршрута",
      data: "path",
      render: (value: number[][]) => (
        <Box
          sx={{
            fontFamily: "monospace",
            bgcolor: (theme) => theme.palette.background.paper,
            p: 2,
            borderRadius: 1,
            maxHeight: "200px",
            overflow: "auto",
          }}
        >
          {value?.map((point, index) => (
            <Typography key={index} sx={{ mb: 0.5 }}>
              {point[0]}, {point[1]}
            </Typography>
          ))}
        </Box>
      ),
    },
  ];

  return (
    <Show isLoading={isLoading}>
      <Stack gap={4}>
        {fields.map(({ label, data, render }) => (
          <Stack key={data} gap={1}>
            <Typography variant="body1" fontWeight="bold">
              {label}
            </Typography>
            {render ? (
              render(record?.[data])
            ) : (
              <TextField value={record?.[data]} />
            )}
          </Stack>
        ))}

        {record?.id && (
          <>
            <LinkedItems<StationItem>
              type="show"
              parentId={record.id}
              parentResource="route"
              childResource="station"
              fields={stationFields}
              title="станции"
            />

            <LinkedItems<VehicleItem>
              type="show"
              parentId={record.id}
              parentResource="route"
              childResource="vehicle"
              fields={vehicleFields}
              title="транспортные средства"
            />

            <LinkedItems<SightItem>
              type="show"
              parentId={record.id}
              parentResource="route"
              childResource="sight"
              fields={sightFields}
              title="достопримечательности"
            />
          </>
        )}

        
        <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
          <Button 
            variant="contained" 
            color="primary"
            onClick={() => navigate(`/route-preview/${id}`)}
          >
            Предпросмотр маршрута
          </Button>
        </Box>
      </Stack>
    </Show>
  );
});