import { defineTrait } from '../define.js';

export const activeState = defineTrait({
  name: 'active-state',
  category: 'input-interaction',
  description: 'Tracks pointer-down / active interaction state',
  attributes: ['data-active-state-active'],
  events: [],
  config: [],
  setup({ host }) {
    function onClick() {
      if (host.hasAttribute('data-active-state-active')) {
        host.removeAttribute('data-active-state-active');
      } else {
        host.setAttribute('data-active-state-active', '');
      }
    }

    host.addEventListener('click', onClick);

    return () => {
      host.removeEventListener('click', onClick);
      host.removeAttribute('data-active-state-active');
    };
  },
});
