import { compose } from '../../../helpers';
import { getComponentName } from '../../../helpers/componentHelpers';
import { createStyleMixin, createProxy } from '../../../mixins';

export const componentName = getComponentName('notification-card');

const notificationCardMixin = (superclass) =>
  class NotificationCardMixinClass extends superclass {
    close() {
      // if animation is not applied to the element, the node will not be removed
      // from the DOM. We should avoid that. So, if in any case we allow
      // customizing the animation - we should check if animation is applied
      // and if it's not applied - remove the element from the DOM and dispatch
      // `card-closed` event.
      this.baseElement.addEventListener('animationend', () => {
        this.remove();
        this.dispatchEvent(new Event('card-closed'));
      });

      this.setAttribute('opened', 'false');
    }

    constructor() {
      super();

      this.baseElement.innerHTML = `
      <div part="root">
        <div part="content">
          <slot></slot>
        </div>
        <div part="close">
          <slot name="close"></slot>
        </div>
      </div>
      `;

      this.closeEle = this.shadowRoot.querySelector('[part="close"]');
    }

    init() {
      super.init?.();

      this.closeEle.onclick = () => {
        this.close();
      };
    }
  };

const selectors = {
  content: () => 'vaadin-notification-card::part(content)',
  overlay: () => 'vaadin-notification-card::part(overlay)',
};

export const NotificationCardClass = compose(
  createStyleMixin({
    mappings: {
      hostMinWidth: { selector: selectors.content, property: 'min-width' },
      fontFamily: {},
      fontSize: {},
      backgroundColor: { selector: selectors.content },
      textColor: { property: 'color' },
      boxShadow: {},
      borderWidth: { selector: selectors.content, property: 'border-width' },
      borderColor: { selector: selectors.content, property: 'border-color' },
      borderStyle: { selector: selectors.content, property: 'border-style' },
      borderRadius: [
        { selector: selectors.content, property: 'border-radius' },
        { selector: selectors.overlay, property: 'border-radius' },
      ],
      verticalPadding: [
        { selector: selectors.content, property: 'padding-top' },
        { selector: selectors.content, property: 'padding-bottom' },
      ],
      horizontalPadding: [
        { selector: selectors.content, property: 'padding-right' },
        { selector: selectors.content, property: 'padding-left' },
      ],
    },
  }),
  notificationCardMixin
)(
  createProxy({
    slots: [],
    wrappedEleName: 'vaadin-notification-card',
    style: () => `
    vaadin-notification-card {
      box-shadow: none;
    }
    ::part(overlay) {
      box-shadow: none;
      background: none;
    }

    [part="close"] {
      cursor: pointer;
      display: flex;
    }

    [part="content"] {
      display: flex;
      align-items: center;
      flex-grow: 1;
    }

    [part="root"] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    `,
    excludeAttrsSync: ['tabindex', 'style'],
    componentName,
  })
);
