import * as domtools from '@design.estate/dees-domtools';

export function containerResponsive() {
  return function (target: any) {
    const tagName: string =
      target.is || target.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
    const containerStyles = domtools.breakpoints.containerContextStyles(tagName);

    const original = target.styles;
    if (Array.isArray(original)) {
      target.styles = [...original, containerStyles];
    } else if (original) {
      target.styles = [original, containerStyles];
    } else {
      target.styles = [containerStyles];
    }
    return target;
  };
}