import {Box, Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'

export type FieldType = {
  label: string
  data: any
  render?: (value: any) => React.ReactNode
}

export const CarrierShow = () => {
  const {query} = useShow({})
  const {data, isLoading} = query

  const record = data?.data

  const fields: FieldType[] = [
    {label: 'Полное имя', data: 'full_name'},
    {label: 'Короткое имя', data: 'short_name'},
    {label: 'Город', data: 'city'},
    {
      label: 'Основной цвет',
      data: 'main_color',
      render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
    },
    {
      label: 'Цвет левого виджета',
      data: 'left_color',
      render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
    },
    {
      label: 'Цвет правого виджета',
      data: 'right_color',
      render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
    },
    {label: 'Слоган', data: 'slogan'},
    {label: 'Логотип', data: 'logo', render: (value: number) => <img src={`https://wn.krbl.ru/media/${value}/download`} alt={String(value)} style={{maxWidth: '10%', objectFit: 'contain', borderRadius: 8}} />},
  ]

  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>
        ))}
      </Stack>
    </Show>
  )
}