import { isResponsiveType } from '../../../types/type-guard';
import { getCurrentBreakpoint, createCompleteResponsiveMap } from '../../../utils/breakpoints';
import { isValidPercentage } from '../../../utils/number';
/**
 * A class for format SizeType
 *
 * @augments ResponsiveSizeFormatter
 */
class ResponsiveSizeFormatter {
  /**
   * Given a responsive size, return the size according current window width
   *
   * @param {ResponsiveType<SizeType>} input - ResponsiveScope
   * @returns {ResponsiveSizeType} - size.
   */
  format(input) {
    const breakpoint = getCurrentBreakpoint();
    // string type assertion is needed here, cause if we have <vega-modal size=650/>, stencil is not able to parse it as number but string since the property is a union type of number and string
    if ((typeof input === 'number' || typeof input === 'string') && !isNaN(input)) {
      return Number(input);
    }
    else if (typeof input === 'string' && isValidPercentage(input)) {
      return input;
    }
    else if (isResponsiveType(input)) {
      input = createCompleteResponsiveMap(input);
      return input[breakpoint];
    }
    else {
      return null;
    }
  }
}
export default new ResponsiveSizeFormatter();
