import { css } from '@emotion/react';
import {
  maxContainerWidth,
  minContainerWidth,
} from '../../../../src/style/variables';

import { getVarValue } from '../helpers';
import { GumTypescaleFluid } from '../models';

/**
 * Generates fluid typography calc values
 * @param prefix CSS variable prefix (font size or line height)
 * @param size Min value
 * @param additionalSize Max value
 */
export const getFluidValue: GumTypescaleFluid = (
  prefix,
  size,
  additionalSize,
) => {
  const constainerResize = `(100vw - ${minContainerWidth}px)`;
  const containerDiff = `(${maxContainerWidth} - ${minContainerWidth})`;

  const valueMin = getVarValue(prefix, String(size));
  const valueMax = getVarValue(prefix, String(additionalSize));
  const unitlessMin = getVarValue(prefix, `${String(size)}-unitless`);
  const unitlessMax = getVarValue(prefix, `${String(additionalSize)}-unitless`);

  const unitlessCalc = `(${unitlessMax} - ${unitlessMin})`;
  const containerCalc = `(${constainerResize} / ${containerDiff})`;

  return css`
    ${prefix}: calc(${valueMin} + ${unitlessCalc} * ${containerCalc});

    @media (max-width: ${minContainerWidth}px) {
      ${prefix}: ${valueMin};
    }

    @media (min-width: ${maxContainerWidth}px) {
      ${prefix}: ${valueMax};
    }
  `;
};