export default function generateResponsiveCSS(...props: any) {
  let mobileCSS = false;
  let mobileLandscapeCSS = false;
  let tabletCSS = false;
  let laptopCSS = false;
  let desktopCSS = false;

  let selectors = props.reduce((prev: any, prop: any) => {
    if (!prop) return prev;

    prev[prop.selector] = {
      mobileCSS: ``,
      mobileLandscapeCSS: ``,
      tabletCSS: ``,
      laptopCSS: ``,
      desktopCSS: ``,
    };

    return prev;
  }, {});

  props.forEach((prop: any) => {
    const { selector, property, value, valueFn } = prop;

    if (value === undefined || value === null) {
      return;
    }

    if (typeof value === 'string' && value.trim().length > 0) {
      mobileCSS = true;
      if (valueFn && typeof valueFn === 'function') {
        selectors[selector].mobileCSS += `${property}: ${valueFn(value)};`;
      } else {
        selectors[selector].mobileCSS += `${property}: ${value};`;
      }
    } else if (typeof value === 'object') {
      if (value.mobile !== undefined) {
        mobileCSS = true;
        if (valueFn && typeof valueFn === 'function') {
          selectors[selector].mobileCSS += `${property}: ${valueFn(
            value.mobile
          )};`;
        } else if (`${value.mobile}`.length > 0) {
          selectors[selector].mobileCSS += `${property}: ${value.mobile};`;
        }
      }
      if (value['mobileLandscape'] !== undefined) {
        mobileLandscapeCSS = true;
        if (valueFn && typeof valueFn === 'function') {
          selectors[selector].mobileLandscapeCSS += `${property}: ${valueFn(
            value['mobileLandscape']
          )};`;
        } else if (`${value.mobileLandscape}`.length > 0) {
          selectors[
            selector
          ].mobileLandscapeCSS += `${property}: ${value['mobileLandscape']};`;
        }
      }
      if (value.tablet !== undefined) {
        tabletCSS = true;
        if (valueFn && typeof valueFn === 'function') {
          selectors[selector].tabletCSS += `${property}: ${valueFn(
            value.tablet
          )};`;
        } else if (`${value.tablet}`.length > 0) {
          selectors[selector].tabletCSS += `${property}: ${value.tablet};`;
        }
      }
      if (value.laptop !== undefined) {
        laptopCSS = true;
        if (valueFn && typeof valueFn === 'function') {
          selectors[selector].laptopCSS += `${property}: ${valueFn(
            value.laptop
          )};`;
        } else if (`${value.laptop}`.length > 0) {
          selectors[selector].laptopCSS += `${property}: ${value.laptop};`;
        }
      }
      if (value.desktop !== undefined) {
        desktopCSS = true;
        if (valueFn && typeof valueFn === 'function') {
          selectors[selector].desktopCSS += `${property}: ${valueFn(
            value.desktop
          )};`;
        } else if (`${value.desktop}`.length > 0) {
          selectors[selector].desktopCSS += `${property}: ${value.desktop};`;
        }
      }
    }
  });

  let css = '';
  if (mobileCSS) {
    Object.keys(selectors).forEach((selector) => {
      css += selectors[selector].mobileCSS
        ? `${selector} {${selectors[selector].mobileCSS}}`
        : '';
    });
  }
  if (mobileLandscapeCSS) {
    css += `@media (min-width: 640px) {`;
    Object.keys(selectors).forEach((selector) => {
      css += selectors[selector].mobileLandscapeCSS
        ? `${selector} {${selectors[selector].mobileLandscapeCSS}}`
        : '';
    });
    css += `}`;
  }
  if (tabletCSS) {
    css += `@media (min-width: 768px) {`;
    Object.keys(selectors).forEach((selector) => {
      css += selectors[selector].tabletCSS
        ? `${selector} {${selectors[selector].tabletCSS}}`
        : '';
    });
    css += `}`;
  }
  if (laptopCSS) {
    css += `@media (min-width: 1024px) {`;
    Object.keys(selectors).forEach((selector) => {
      css += selectors[selector].laptopCSS
        ? `${selector} {${selectors[selector].laptopCSS}}`
        : '';
    });
    css += `}`;
  }
  if (desktopCSS) {
    css += `@media (min-width: 1280px) {`;
    Object.keys(selectors).forEach((selector) => {
      css += selectors[selector].desktopCSS
        ? `${selector} {${selectors[selector].desktopCSS}}`
        : '';
    });
    css += `}`;
  }

  return css;
}
