import { Controller } from '@hotwired/stimulus';

export default class extends Controller<HTMLElement> {
   private resizeObserver: ResizeObserver;
   private showMoreBreakpoint = 300;

   static targets = ['showMore', 'parameterGroups'];
   static values = {breakpoint: Number,};

   declare showMoreTarget: HTMLElement;
   declare parameterGroupsTarget: HTMLElement;
   declare readonly breakpointValue: number;
   declare readonly hasBreakpointValue: boolean;




   initialize() {
      this.showMoreBreakpoint = this.hasBreakpointValue ? this.breakpointValue : 300;
      if (this.element.scrollHeight <= this.showMoreBreakpoint) {
         this.hideShowMore();
      }

      this.resizeObserver = new ResizeObserver((el) => {
         if (el[0].contentRect.height < this.showMoreBreakpoint) {
            this.hideShowMore();
         } else {
            this.showShowMore();
         }
      });

      this.resizeObserver.observe(this.element);
   }

   disconnect() {
      this.resizeObserver.disconnect();
   }

   toggleMore() {
      this.parameterGroupsTarget.classList.toggle('active');
   }

   hideShowMore() {
      this.showMoreTarget.classList.add('is-hidden');
   }

   showShowMore() {
      this.showMoreTarget.classList.remove('is-hidden');
   }
}
