import { screenSizes } from '@styles/sizes';

const makeMediaQuery = (
  widthSelector: string,
): {
  [key in keyof typeof screenSizes]: (style: string) => string;
} => {
  const maxWidth = Object.keys(screenSizes).reduce((accumulator: any, key: string) => {
    const accumulated = accumulator;
    accumulated[key] = (style: string) => {
      return `
      @media (${widthSelector}: ${(screenSizes as any)[key]}) {
        ${style}
      }`;
    };
    return accumulated;
  }, {});
  return maxWidth;
};

const maxWidth = makeMediaQuery('max-width');

const minWidth = makeMediaQuery('min-width');

const inputMethod = {
  touch: (style: TemplateStringsArray) => `@media (pointer: coarse) {${style}}`,
  mouse: (style: TemplateStringsArray) => `@media (pointer: fine) {${style}}`,
};

const outputMethod = {
  print: (style: TemplateStringsArray) => `@media print {${style}}`,
  screen: (style: TemplateStringsArray) => `@media screen {${style}}`,
};

const ratio = {
  horizontal: (style: TemplateStringsArray) => `@media (min-aspect-ratio: 1/1) {${style}}`,
  vertical: (style: TemplateStringsArray) => `@media (max-aspect-ratio: 1/1) {${style}}`,
};

export { maxWidth, minWidth, inputMethod, outputMethod, ratio };