import { Controller } from '@hotwired/stimulus';
import { WpjModal } from '@assets/components/wpj.modal';
import cookies from 'js-cookie';

const COOKIE_NAME = 'cookie-bar';

const cookieModal = new WpjModal(
   document.querySelector('[data-modal-endpoint="cookiebar"]'),
   false
);

export default class extends Controller<HTMLElement> {
   static targets = ['simple', 'advanced', 'checkbox', 'showAdvancedButton'];

   declare simpleTarget: HTMLElement;
   declare advancedTarget: HTMLElement;
   declare checkboxTargets: HTMLInputElement[];
   declare showAdvancedButtonTarget: HTMLButtonElement;

   initialize() {
      const cookieBar = wpj.getCookie(COOKIE_NAME);
      if (cookieBar === null) {
         this.simpleTarget.style.display = 'inline';
         this.simpleTarget.setAttribute('aria-hidden', 'false');
         this.advancedTarget.style.display = 'none';
         this.advancedTarget.setAttribute('aria-hidden', 'true');
         this.showAdvancedButtonTarget.setAttribute('aria-expanded', 'false');
         cookieModal.create({ endpoint: 'cookiebar' });
      } else {
         const storages = cookieBar.split(',');
         this.checkboxTargets.forEach(function(input) {
            input.checked = storages.includes(input.value);
         });
      }
   }

   close(): void {
      if (cookieModal && cookieModal.modal) {
         cookieModal.hide(cookieModal.modal);
      }
   }

   rejectAll(): void {
      this.preselectAll(false);
      this.advancedAccept();
      this.close();
   }

   simpleAccept(): void {
      const me = this;
      setTimeout(function() {
         me.preselectAll();
         me.advancedAccept();
      }, 100);
      this.close();
   }

   advancedAccept(): void {
      let consents: any[] = [];

      this.checkboxTargets
         .filter(input => (input.checked))
         .forEach(function(input: HTMLInputElement) {
            consents.push(input.value);
         });

      if (window.wpj.cookie_bar_send) {
         let consents_props = {
            ad_storage: consents.includes('ad_storage') ? 'granted' : 'denied',
            ad_user_data: consents.includes('ad_storage') ? 'granted' : 'denied',
            ad_personalization: consents.includes('ad_storage') ? 'granted' : 'denied',
            personalization_storage: consents.includes('personalization_and_functionality_storage') ? 'granted' : 'denied',
            functionality_storage: 'granted',
            analytics_storage: consents.includes('analytics_storage') ? 'granted' : 'denied'
         };

         window.dataLayer.push({ 'event': 'consent_update', 'consents': consents_props });
      }

      cookies.set(COOKIE_NAME, consents.length ? consents.toString() : '0', { expires: 365 * 2, path: '/' });
      document.dispatchEvent(new CustomEvent('consentsChange'));
      this.close();
   }

   preselectAll(isAllowed: boolean = true): void {
      this.checkboxTargets.forEach(function(input: HTMLInputElement) {
         input.checked = isAllowed;
      });
   }

   showAdvanced(e): void {
      if (e.params.preselect === 'Y') {
         this.preselectAll();
      }
      this.simpleTarget.style.display = 'none';
      this.simpleTarget.setAttribute('aria-hidden', 'true');
      this.advancedTarget.style.display = 'inline';
      this.advancedTarget.setAttribute('aria-hidden', 'false');
      this.showAdvancedButtonTarget.setAttribute('aria-expanded', 'true');
   }
}
