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

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) => (
        <Box height={150} sx={{display: "flex", justifyContent: "start"}}>
          <MediaView media={{id: value, media_type: 1}} />
        </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>
        ))}
      </Stack>
    </Show>
  );
};