/**
@license
Copyright (c) 2022 trading_peter
This program is available under Apache License Version 2.0
*/

import { dropzoneMixin } from './dropzone-mixin';
import { upload } from '@tp/helpers/upload-files.js';
import { LitElement, html, css } from 'lit';

class TpDropzone extends upload(dropzoneMixin(LitElement)) {
  static get styles() {
    return [
      css`
        :host {
          display: flex;
          justify-content: center;
          align-items: center;
          border: dashed 2px #000000;
          padding: 20px;
          text-align: center;
        }

        :host([isdraggedon]) {
          color: #ffffff;
          border: dashed 2px #000000;
        }
      `
    ];
  }

  render() {
    return html`
      <slot></slot>
    `;
  }

  static get properties() {
    return {
      url: { type: String },
      isDraggedOn: { type: Boolean, reflect: true },
    };
  }

  async upload(dt) {
    let files = dt.files;
    if (files.length > 0) {
      const params = { url: this.url, data: null };
      document.dispatchEvent(new CustomEvent('before-upload', { detail: params, bubbles: true, composed: true }));
      this.uploadFiles(params.url, files, params.data);
    }
  }

  _upload(dt) {
    return this.upload(dt);
  }
}

window.customElements.define('tp-dropzone', TpDropzone);