import { css } from '@emotion/react';
import { breakpoints } from '../../../../src/style/variables';

import { GumGridCellMixin, GumGridColMixin, GumGridRowMixin } from '../models';

/**
 * Deprecated - use gridCell function instead
 * @param config
 */
export const gridCol: GumGridColMixin = (config) => {
  console.warn('gridCol is getting deprecated - use gridCell function instead');
  if (!Array.isArray(config)) {
    if (config.mediaMinWidth) {
      return css`
        @media ${breakpoints[config.mediaMinWidth]} {
          grid-column-start: span ${config.cols};
        }
      `;
    }

    return css`
      grid-column-start: span ${config.cols};
    `;
  }

  const configFragment = config.map(({ mediaMinWidth, cols }) => {
    if (mediaMinWidth) {
      return css`
        @media ${breakpoints[mediaMinWidth]} {
          grid-column-start: span ${cols};
        }
      `;
    }

    return css`
      grid-column-start: span ${cols};
    `;
  });

  return css`
    ${configFragment.map((config) => config)}
  `;
};

/**
 * Deprecated - use gridCell function instead
 * @param config
 */
export const gridRow: GumGridRowMixin = (config) => {
  if (!Array.isArray(config)) {
    if (config.mediaMinWidth) {
      return css`
        @media ${breakpoints[config.mediaMinWidth]} {
          grid-column-start: span ${config.rows};
        }
      `;
    }

    return css`
      grid-row-start: span ${config.rows};
    `;
  }

  const configFragment = config.map(({ mediaMinWidth, rows }) => {
    if (mediaMinWidth) {
      return css`
        @media ${breakpoints[mediaMinWidth]} {
          grid-column-start: span ${rows};
        }
      `;
    }

    return css`
      grid-column-start: span ${rows};
    `;
  });

  return css`
    ${configFragment.map((config) => config)}
  `;
};

/**
 * Adds a grid row or column cell with config and media query.
 * @param type Cell type - "row" or "column"
 * @param config - Grid params - span, start, end and media
 */
export const gridCell: GumGridCellMixin = (
  type,
  { span, start, end, mediaMinWidth },
) => {
  let gridCellStyle = css``;

  if (!span && !start && !end) {
    return gridCellStyle;
  }

  if (span) {
    gridCellStyle = css`
      ${`grid-${type}: span ${span} / span ${span}`};
    `;
  }

  if (start && end) {
    gridCellStyle = css`
      ${`grid-${type}-start: ${start}`};
      ${`grid-${type}-end: ${end}`};
    `;
  }

  if (start) {
    gridCellStyle = css`
      ${`grid-${type}-start: ${start}`};
    `;
  }

  if (end) {
    gridCellStyle = css`
      ${`grid-${type}-end: ${end}`};
    `;
  }

  if (!mediaMinWidth) {
    return gridCellStyle;
  }

  return css`
    @media ${breakpoints[mediaMinWidth]} {
      ${gridCellStyle}
    }
  `;
};