import { convertCssScalarToStringValue, Direction, ICSSScalar } from "./units";

export interface ISpacing {
  top: ICSSScalar;
  right: ICSSScalar;
  bottom: ICSSScalar;
  left: ICSSScalar;
};

export enum SpacingType {
  Padding = "padding",
  Margin = "margin",
  /**
   * top, bottom, left, right
   */
  Absolute = "",
}


interface IMarginStyleObject {
  "margin-top": string;
  "margin-right": string;
  "margin-bottom": string;
  "margin-left": string;
}

interface IPaddingStyleObject {
  "padding-top": string;
  "padding-right": string;
  "padding-bottom": string;
  "padding-left": string;
}

interface IAbsoluteSpacingStyleObject {
  "top": string;
  "right": string;
  "bottom": string;
  "left": string;
}

type ISpacingStyleObject = IMarginStyleObject | IPaddingStyleObject | IAbsoluteSpacingStyleObject;

export const buildSpacingStyleObject = (spacing: Partial<ISpacing>, type: SpacingType): Partial<ISpacingStyleObject> => {
  return {
    ...spacing.top && {
      [`${type === SpacingType.Absolute ? "" : `${type}-`}top`]: convertCssScalarToStringValue(spacing.top),
    },
    ...spacing.right && {
      [`${type === SpacingType.Absolute ? "" : `${type}-`}right`]: convertCssScalarToStringValue(spacing.right),
    },
    ...spacing.bottom && {
      [`${type === SpacingType.Absolute ? "" : `${type}-`}bottom`]: convertCssScalarToStringValue(spacing.bottom),
    },
    ...spacing.left && {
      [`${type === SpacingType.Absolute ? "" : `${type}-`}left`]: convertCssScalarToStringValue(spacing.left),
    },
  };
}

export const getMarginPropertyForDirection = (direction: Direction): string => {
  switch (direction) {
    case Direction.Up:
      return "marginTop";
    case Direction.Down:
      return "marginBottom";
    case Direction.Right:
      return "marginRight";
    case Direction.Left:
    default:
      return "marginLeft";
  }
}

export const getHeightOfElementInViewHeight = (element: HTMLElement): number => {
  return (element.clientHeight / document.documentElement.clientHeight) * 100;
}

export const getWidthOfElementInViewWidth = (element: HTMLElement): number => {
  return (element.clientWidth / document.documentElement.clientWidth) * 100;
}