import { Box, Paper, useMediaQuery, useTheme } from "@mui/material";
import { PieChart } from "@mui/x-charts";

import type { DevicesResponse } from "@api/statistic";

type DevicesProps = {
  devices: DevicesResponse;
};

type DeviceProps = {
  title: string;
  devices: Record<string, number>;
};

const Device = ({ title, devices }: DeviceProps) => {
  return (
    <Paper>
      <Box sx={{ height: "235px" }}>
        <PieChart
          series={[
            {
              data: Object.entries(devices).map(([id, value]) => ({
                id,
                value,
              })),
              innerRadius: 50,
            },
          ]}
        />
      </Box>
    </Paper>
  );
};

export const Devices = ({ devices }: DevicesProps) => {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: isTablet
          ? isMobile
            ? "1fr"
            : "1fr 1fr"
          : "1fr 1fr 1fr",
        gap: "20px",
        marginTop: "30px",
      }}
    >
      <Device title="Устройства" devices={devices.device} />
      <Device title="Операционные системы" devices={devices.os} />
      <Device title="Браузеры" devices={devices.browser} />
    </Box>
  );
};