import { ClassFlag } from "../../ClassFlag";
import { ElementAttribute } from "../../ElementAttribute";
import { OnClick } from "../../EventListeners";

export class ToggleClass
{
  static readonly attribute = new ElementAttribute( "-toggle--class" );
  static readonly assignedAttribute = new ElementAttribute( "-toggle--class--assigned" );
  static readonly blockDurationMS = 500;

  static applyOnDocument()
  {
    console.log( "APPLY" );
    ToggleClass.attribute.forEachInDoc( ( e ) => ToggleClass.applyOnElement( e ) );
  }

  static applyOnElement( element:Element )
  { 
    console.log( "APPLY", element );

    if ( ToggleClass.assignedAttribute.in( element ) )
    {
      return;
    }

    ToggleClass.assignedAttribute.to( element, "0" );

    let action = ()=>
    {
      let now = new Date().getTime();
      let time = parseFloat( ToggleClass.assignedAttribute.from( element ) );
      let elapsed = now - time;

      if ( elapsed < ToggleClass.blockDurationMS )
      {
        return;
      }

      ToggleClass.assignedAttribute.to( element, now + "");

      let parameters = ToggleClass.attribute.from( element ).split( ";" );
      let selector = parameters[ 0 ];
      let className = parameters[ 1 ];


      let selectedElements = document.querySelectorAll( selector );      

      selectedElements.forEach(
        ( selectedElement )=>
        {
          console.log( selector, selectedElement );
          ClassFlag.toggleClass( selectedElement, className );
        }
      )
    
      
    }

    OnClick.add( element as HTMLElement, action );


  }

}