import {Stack, Typography, Box} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
import {LinkedItems} from '../../components/LinkedItems'
import {StationItem, VehicleItem, stationFields, vehicleFields} from './types'

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

  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',
          }}
        >
          {JSON.stringify(value)}
          {/* {value?.map((point, index) => (
            <Typography key={index} sx={{mb: 0.5}}>
              Точка {index + 1}: [{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="транспортные средства" />
          </>
        )}
      </Stack>
    </Show>
  )
}