import { useMemo } from 'react';

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

import { PolicyTypes } from 'src/types/vacations';
import { groupPolicyTypes } from 'src/utils/vacations';

export const useCarousel = (policyTypes: PolicyTypes[]) => {
  const theme = useTheme();
  const isGreaterThanLgScreenSize = useMediaQuery(theme.breakpoints.up('lg'));
  const isGreaterThanMdScreenSize = useMediaQuery(theme.breakpoints.up('md'));
  const isGreaterThanSmScreenSize = useMediaQuery(theme.breakpoints.up('sm'));

  const screenSize = useMemo(() => {
    if (isGreaterThanLgScreenSize) return 'lg';
    if (isGreaterThanMdScreenSize) return 'md';
    if (isGreaterThanSmScreenSize) return 'sm';
    return 'xs';
  }, [
    isGreaterThanLgScreenSize,
    isGreaterThanMdScreenSize,
    isGreaterThanSmScreenSize,
  ]);

  const gridSize = useMemo(() => {
    if (isGreaterThanLgScreenSize) return 3;
    if (isGreaterThanMdScreenSize) return 4;
    if (isGreaterThanSmScreenSize) return 6;
    return 12;
  }, [
    isGreaterThanLgScreenSize,
    isGreaterThanMdScreenSize,
    isGreaterThanSmScreenSize,
  ]);

  const groupedPolicyTypes = useMemo(() => {
    return groupPolicyTypes(policyTypes, screenSize);
  }, [policyTypes, screenSize]);

  return { gridSize, groupedPolicyTypes };
};