From 3bfcc2dcda098319a3e09d6395dc9d74f2f0d9d3 Mon Sep 17 00:00:00 2001
From: felipepetuco <felipe.petuco@gmail.com>
Date: Wed, 11 Sep 2024 18:28:00 -0300
Subject: [PATCH] =?UTF-8?q?feat(style):=20implementa=20media=20query=20com?=
 =?UTF-8?q?=20vari=C3=A1veis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../services/po-style/po-style.interface.ts   |  4 ++
 .../po-style/po-style.service.spec.ts         | 16 ++++++
 .../lib/services/po-style/po-style.service.ts | 53 +++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 projects/ui/src/lib/services/po-style/po-style.interface.ts
 create mode 100644 projects/ui/src/lib/services/po-style/po-style.service.spec.ts
 create mode 100644 projects/ui/src/lib/services/po-style/po-style.service.ts

diff --git a/projects/ui/src/lib/services/po-style/po-style.interface.ts b/projects/ui/src/lib/services/po-style/po-style.interface.ts
new file mode 100644
index 000000000..a4788a692
--- /dev/null
+++ b/projects/ui/src/lib/services/po-style/po-style.interface.ts
@@ -0,0 +1,4 @@
+export interface MediaQueryRule {
+  mediaRule: string;
+  valuesRule: Array<string>;
+}
diff --git a/projects/ui/src/lib/services/po-style/po-style.service.spec.ts b/projects/ui/src/lib/services/po-style/po-style.service.spec.ts
new file mode 100644
index 000000000..7f57650c6
--- /dev/null
+++ b/projects/ui/src/lib/services/po-style/po-style.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PoStyleService } from './po-style.service';
+
+describe('PoStyleService', () => {
+  let service: PoStyleService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PoStyleService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ui/src/lib/services/po-style/po-style.service.ts b/projects/ui/src/lib/services/po-style/po-style.service.ts
new file mode 100644
index 000000000..7a1cd024d
--- /dev/null
+++ b/projects/ui/src/lib/services/po-style/po-style.service.ts
@@ -0,0 +1,53 @@
+import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { MediaQueryRule } from './po-style.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PoStyleService {
+  private renderer: Renderer2;
+
+  constructor(rendererFactory: RendererFactory2) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+  }
+
+  updateMediaQueries(globalMediaQueriesRules: Array<MediaQueryRule>): void {
+    const styleSheets = document.styleSheets;
+
+    const styleElement = this.renderer.createElement('style');
+    this.renderer.appendChild(document.head, styleElement);
+
+    const sheetDom = styleElement.sheet as CSSStyleSheet;
+
+    Array.from(styleSheets).forEach(sheet => {
+      const rules = sheet.cssRules || sheet.rules;
+
+      Array.from(rules).forEach(rule => {
+        // Verifica se a regra é de mídia (CSSMediaRule)
+        if (rule instanceof CSSMediaRule) {
+          const mediaRule = rule;
+
+          // Itera sobre cada conjunto de regras de media queries fornecido
+          globalMediaQueriesRules.forEach(queryRule => {
+            if (mediaRule.media.mediaText.includes(queryRule.mediaRule)) {
+              let updatedMediaText = mediaRule.cssText;
+              const variablesInMediaRule = updatedMediaText.match(/var\(--[^)]+\)/g) || [];
+              console.log('variablesInMediaRule:', variablesInMediaRule);
+
+              // Substitui as variáveis de media queries pelos valores fornecidos
+              variablesInMediaRule.forEach((variable, index) => {
+                if (index < queryRule.valuesRule.length) {
+                  updatedMediaText = updatedMediaText.replace(variable, queryRule.valuesRule[index]);
+                  console.log('variable:', variable, ',', updatedMediaText);
+                }
+              });
+
+              // Adiciona a regra modificada à folha de estilo dinâmica
+              sheetDom.insertRule(updatedMediaText, sheetDom.cssRules.length);
+            }
+          });
+        }
+      });
+    });
+  }
+}