import { Stack, Typography } from "@mui/material";
import { useShow } from "@refinedev/core";
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
import { TOKEN_KEY } from "@providers";

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

  const record = data?.data;

  const fields = [
    // {label: 'ID', data: 'id'},
    { label: "Название", data: "name" },
    // {label: 'Код страны', data: 'country_code'},
    { label: "Страна", data: "country" },
    {
      label: "Герб",
      data: "arms",
      render: (value: number) => (
        <img
          src={`${
            import.meta.env.VITE_KRBL_MEDIA
          }${value}/download?token=${localStorage.getItem(TOKEN_KEY)}`}
          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>
  );
};