import {type Cash} from 'cash-dom/dist/cash';
import {uniqueId} from 'lodash-es';
import Lottie from 'lottie-web';
import {type ClassComponent} from 'mithril';

import Component from './Component.jsx';

export default class Alert extends Component implements ClassComponent<{
  heading?: string,
  icon?: string,
  image?: string,
  'image-width'?: string | number,
  'image-height'?: string | number,
  'image-alt'?: string,
  trigger?: string,
  open?: boolean
}> {
  view(vnode) {
    const image = {
      src: this.attrs.pull('image'),
      width: this.attrs.pull('image-width', '125px'),
      height: this.attrs.pull('image-height', '125px'),
      alt: this.attrs.pull('image-alt')
    };

    const actions = [];
    for (const child of vnode.children) {
      if (child.attrs && child.attrs.slot && ['primaryAction', 'secondaryAction'].includes(child.attrs.slot)) {
        actions.push(child);
        const index = vnode.children.indexOf(child);
        vnode.children.splice(index, 1);
      }
    }

    return (
      <mwc-dialog {...this.attrs.all()}>
        <div className="graphic" style={`width: ${image.width}; height: ${image.height}; margin: 0 auto;`}>
          {image.src && <img src={image.src} alt={image.alt}/>}
        </div>

        <div className="content">
          {vnode.children}
        </div>

        <mwc-button label={__('OK')} slot="primaryAction" dialogAction="ok"/>
        ${actions}
      </mwc-dialog>
    );
  }

  oninit() {
    if (this.attrs.get('id')) {
      this.attrs.put('id', uniqueId('dialog_'));
    }
  }

  oncreate(vnode) {
    const dialog: Cash = $(`#${this.attrs.get('id')}`);

    const animation = Lottie.loadAnimation({
      container: dialog.find('.graphic')[0],
      renderer: 'svg',
      loop: false,
      autoplay: false,
      path: new URL(`./animations/${this.attrs.pull('icon')}.png`, import.meta.url).href
    });

    dialog.on('opened', () => {
      animation.play();
    });
  }
}