import { isResponsiveType } from '../../../types/type-guard';
import { Breakpoints } from '../../../constants/public-api';
/**
 * Get the style text from the responsive property.
 */
export class ResponsiveCSSTextFormatter {
  /**
   * > It takes a `ResponsiveType<ManagedResponsiveScopeInput[Flag]>` and returns a string
   *
   * @typedef Flag key of ManagedResponsiveScopeInput
   * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} input - ManagedResponsiveScopeInput[Flag]
   * @returns {string} - CSS text string.
   */
  format(input) {
    if (isResponsiveType(input)) {
      return Object.keys(input)
        .map((breakpoint) => {
        const breakpointValue = input[breakpoint];
        const breakPointFormatted = breakpoint !== 'default' ? breakpoint : undefined;
        return this.generateCssText(this.formatToken(breakpointValue, breakPointFormatted), breakpoint);
      })
        .join(' ');
    }
    else {
      return this.generateCssText(this.formatToken(input));
    }
  }
  /**
   * Create the complete style text with media query selector.
   *
   * @param {string} cssText - The style snippet.
   * @param {BreakpointsTokenType} breakpoint - The screen breakpoint.
   * @returns {string} - Style content with css selector.
   */
  generateCssText(cssText, breakpoint) {
    let result = '';
    if (cssText) {
      result =
        breakpoint && breakpoint !== 'default'
          ? `@media (min-width:${Breakpoints[breakpoint]}px){:host{${cssText}}}`
          : `:host{${cssText}}`;
    }
    return result;
  }
}
