import { useShow } from "@refinedev/core";
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
import { Box, Stack, Typography } from "@mui/material";
import { LinkedItems } from "../../components/LinkedItems";
import { type SightItem, sightFields, stationFields } from "./types";

export const StationShow = () => {
  const { query } = useShow({});
  const { data, isLoading } = query;
  const record = data?.data;

  return (
    <Show isLoading={isLoading}>
      <Stack gap={4}>
        {stationFields.map(({ label, data }) => (
          <Stack key={data} gap={1}>
            <Typography variant="body1" fontWeight="bold">
              {label}
              {label === "Системное название" && (
                <Box>
                  <TextField
                    value={record?.direction ? "(Прямой)" : "(Обратный)"}
                  />
                </Box>
              )}
            </Typography>

            <TextField value={record?.[data] || ""} />
          </Stack>
        ))}

        {record?.id && (
          <LinkedItems<SightItem>
            type="show" // only display
            parentId={record.id}
            parentResource="station"
            childResource="sight"
            fields={sightFields}
            title="достопримечательности"
          />
        )}
      </Stack>
    </Show>
  );
};