import { effects } from 'alpinejs';
import { fadeIn, fadeOut } from 'daisyui/src/utils/animation.js';
import { conditionalCSS } from 'tailwindcss/types/styles.js';

effects.fadeIn = function(el, config) {
 return fadeIn(el, config.speed, config.delay, config.easing);
};

effects.fadeOut = function(el, config) {
 return fadeOut(el, config.speed, config.delay, config.easing);
};

conditionalCSS({
 selector: '.fade-in',
 condition: function(el) {
    return el.animate === 'fade-in';
 },
 rul: function(el, config) {
    return {
      'transition-delay': `${config.delay}ms`,
      'transition-duration': `${config.speed}ms`,
      'transition-timing-function': config.easing,
      'animation-duration': `${config.speed}ms`
    };
 }
});

conditionalCSS({
 selector: '.fade-out',
 condition: function(el) {
    return el.animate === 'fade-out';
 },
 rul: function(el, config) {
    return {
      'transition-delay': `${config.delay}ms`,
      'transition-duration': `${config.speed}ms`,
      'transition-timing-function': config.easing,
      'animation-duration': `${config.speed}ms`
    };
 }
});

export default function () {
 if (this.dialog) {
    // Close dialog
    if (this.dialog.querySelector('button[type="reset"]')) {
      this.dialog.querySelector('button[type="reset"]').addEventListener('click', () => {
        this.close();
      });
    }
    // Submit form
    if (this.dialog.querySelector('button[type="submit"]')) {
      this.dialog.querySelector('button[type="submit"]').addEventListener('click', () => {
        this.close();
      });
    }
 }
}