import React from 'react';

export type SystemProps = {
  // Margin
  mt?: number;
  mb?: number;
  ml?: number;
  mr?: number;
  mx?: number;
  my?: number;
  m?: number;

  // Padding
  pt?: number;
  pb?: number;
  pl?: number;
  pr?: number;
  px?: number;
  py?: number;
  p?: number;

  // Arbitrary style
  sx?: React.CSSProperties;
};

const calculateStyleValue = (multiplier: number, spacer: number = 1): string => {
  return `${multiplier * spacer}em`;
};

const getSystemStyle = (
  systemProps: SystemProps,
  userStyle: React.CSSProperties = {}
): React.CSSProperties => {
  const spacer = 1; // 1em

  let style: React.CSSProperties = {};

  // Margin
  const { mt, mb, ml, mr, mx, my, m } = systemProps;

  if (m !== undefined) {
    const value = calculateStyleValue(m, spacer);
    style.marginTop = value;
    style.marginBottom = value;
    style.marginLeft = value;
    style.marginRight = value;
  }

  if (mx !== undefined) {
    const value = calculateStyleValue(mx, spacer);
    style.marginLeft = value;
    style.marginRight = value;
  }

  if (my !== undefined) {
    const value = calculateStyleValue(my, spacer);
    style.marginTop = value;
    style.marginBottom = value;
  }

  if (mt !== undefined) style.marginTop = calculateStyleValue(mt, spacer);
  if (mb !== undefined) style.marginBottom = calculateStyleValue(mb, spacer);
  if (ml !== undefined) style.marginLeft = calculateStyleValue(ml, spacer);
  if (mr !== undefined) style.marginRight = calculateStyleValue(mr, spacer);

  // Padding
  const { pt, pb, pl, pr, px, py, p } = systemProps;

  if (p !== undefined) {
    const value = calculateStyleValue(p, spacer);
    style.paddingTop = value;
    style.paddingBottom = value;
    style.paddingLeft = value;
    style.paddingRight = value;
  }

  if (px !== undefined) {
    const value = calculateStyleValue(px, spacer);
    style.paddingLeft = value;
    style.paddingRight = value;
  }

  if (py !== undefined) {
    const value = calculateStyleValue(py, spacer);
    style.paddingTop = value;
    style.paddingBottom = value;
  }

  if (pt !== undefined) style.paddingTop = calculateStyleValue(pt, spacer);
  if (pb !== undefined) style.paddingBottom = calculateStyleValue(pb, spacer);
  if (pl !== undefined) style.paddingLeft = calculateStyleValue(pl, spacer);
  if (pr !== undefined) style.paddingRight = calculateStyleValue(pr, spacer);

  // Merge with arbitrary styles (sx)
  if (systemProps.sx) {
    style = { ...style, ...systemProps.sx };
  }

  // Override with user-defined style
  style = { ...style, ...userStyle };

  return style;
};

export {
  getSystemStyle
};