/**
 * This file contains the size units laid out in the design
 * All element dimensions fit a soft grid, and follow an 8px rule
 * Where 1rem is equiv to 16px. This can be set globally with `coreSize`
 * So to specify a dimension that fits the soft grid, you can do:
 * `$mySize: sizeUnit(4); // Equal to 32px or relative alternative`
 */

/* Global size unit, in rem */
const coreSize = 0.5;

/* Returns em value, allowing for all dimensions to easily follow the 8px soft grid */
const sizeUnit = (size: number): string => `${size * coreSize}rem`;

/* Standard max screen sizes, used for media queries */
const screenSizes = {
  mobile: '480px', // Portrait mobile
  tablet: '768px', // Landscape mobile or portrait tablet
  laptop: '1024px', // Standard HD 14" laptop screen
  desktop: '1281px', // External monitor
};

const gridValues = (columns = 12, colWidth = 8, gutterWidth = 2) => ({
  maxGridWidth: sizeUnit(columns * colWidth + (columns - 1) * gutterWidth),
  gutter: sizeUnit(gutterWidth),
  minRowHeight: sizeUnit(5),
  minColWidth: sizeUnit(colWidth),
  numCols: columns,
});

/* Standard sizes used for padding and margins */
const gutterValues = {
  extraLarge: sizeUnit(8),
  large: sizeUnit(6),
  medium: sizeUnit(4),
  small: sizeUnit(2),
  extraSmall: sizeUnit(1),
};

const headingSizes = {
  extraLarge: sizeUnit(9), // 72px
  large: sizeUnit(6.25), // 50px
  medium: sizeUnit(5), // 40px
  small: sizeUnit(4), // 32px
  extraSmall: sizeUnit(3), // 24px
};

const textSizes = {
  extraLarge: sizeUnit(3), // 24px
  large: sizeUnit(2), // 16px
  medium: sizeUnit(1.75), // 14px
  small: sizeUnit(1.5), // 12px
};

const lineHeights = {
  large: sizeUnit(3), // 24px
  medium: sizeUnit(2.5), // 20px
  small: sizeUnit(2.25), // 18px
};

/* Standard dimensions for all the form elements: buttons, inputs, drop-downs etc */
const formElementSizes = {
  large: {
    width: sizeUnit(39),
    height: sizeUnit(7),
  },
  medium: {
    width: sizeUnit(30),
    height: sizeUnit(7),
  },
  small: {
    width: sizeUnit(16),
    height: sizeUnit(4.5),
  },
};

export {
  sizeUnit,
  screenSizes,
  gridValues,
  gutterValues,
  headingSizes,
  textSizes,
  formElementSizes,
  lineHeights,
};