// components/consent-component.js - Consent modal functionality

import { StateManager } from '../services/state-manager.js';

export const ConsentComponent = {
  elements: {
    consentModal: null,
    consentCheckbox: null,
    consentBtn: null,
    profileModal: null
  },

  /**
   * Initialize the consent component
   */
  init() {
    this.elements.consentModal = document.getElementById('consent-modal');
    this.elements.consentCheckbox = document.getElementById('consent-checkbox');
    this.elements.consentBtn = document.getElementById('consentBtn');
    this.elements.profileModal = document.getElementById('profile-modal');

    this.attachEventListeners();
  },

  /**
   * Attach event listeners
   */
  attachEventListeners() {
    // When the checkbox is toggled, enable or disable the button
    this.elements.consentCheckbox.addEventListener('change', () => {
      if (this.elements.consentCheckbox.checked) {
        this.elements.consentBtn.disabled = false;
        this.elements.consentBtn.classList.replace('disabled-button', 'ok-button');
      } else {
        this.elements.consentBtn.disabled = true;
        this.elements.consentBtn.classList.replace('ok-button', 'disabled-button');
      }
    });

    // Handle the consent acceptance
    this.elements.consentBtn.addEventListener('click', () => {
      StateManager.setConsent(true);
      this.elements.profileModal.scrollIntoView({
        behavior: 'smooth',
        inline: 'start',
        block: 'nearest'
      });
    });
  }
};