import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';

const ServiceMetricsSkeleton = () => {
  const theme = useTheme();
  const isLessThanLgScreenSize = useMediaQuery(theme.breakpoints.down('lg'));

  const skeletonDimensions = !isLessThanLgScreenSize
    ? {
        title: {
          width: 191,
          height: 15,
        },
        value: {
          width: 124,
          height: 48,
        },
      }
    : {
        title: {
          width: 150,
          height: 15,
        },
        value: {
          width: 84,
          height: 48,
        },
      };

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        gap: 3,
        width: 1,
        alignItems: 'center',
        flexWrap: 'wrap',
      }}
    >
      <Stack sx={{ gap: 1, flex: 1 }}>
        <HuSkeleton
          width={skeletonDimensions.title.width}
          height={skeletonDimensions.title.height}
        />
        <HuSkeleton
          width={skeletonDimensions.value.width}
          height={skeletonDimensions.value.height}
        />
      </Stack>
      <Divider
        orientation="vertical"
        flexItem
      />

      <Stack sx={{ gap: 1, flex: 1 }}>
        <HuSkeleton
          width={skeletonDimensions.title.width}
          height={skeletonDimensions.title.height}
        />
        <HuSkeleton
          width={skeletonDimensions.value.width}
          height={skeletonDimensions.value.height}
        />
      </Stack>
      <Divider
        orientation="vertical"
        flexItem
      />

      <Stack sx={{ gap: 1, flex: 1 }}>
        <HuSkeleton
          width={skeletonDimensions.title.width}
          height={skeletonDimensions.title.height}
        />
        <HuSkeleton
          width={skeletonDimensions.value.width}
          height={skeletonDimensions.value.height}
        />
      </Stack>
      <Divider
        orientation="vertical"
        flexItem
      />
      <Stack sx={{ gap: 1, flex: 1 }}>
        <HuSkeleton
          width={skeletonDimensions.title.width}
          height={skeletonDimensions.title.height}
        />
        <HuSkeleton
          width={skeletonDimensions.value.width}
          height={skeletonDimensions.value.height}
        />
      </Stack>
    </Stack>
  );
};

export default ServiceMetricsSkeleton;
