import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
import {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}
            </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>
  )
}