/**
@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;
        }

        input[type="file"] {
          display: none;
        }
      `
    ];
  }

  render() {
    return html`
      <slot></slot>
      <input type="file" @change=${this._handleFileSelect}>
    `;
  }

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

  constructor() {
    super();
    this.file = null;
  }

  firstUpdated() {
    super.firstUpdated();
    this._fileInput = this.shadowRoot.querySelector('input[type="file"]');
    this.addEventListener('click', this._handleClick);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('click', this._handleClick);
  }

  _handleClick(e) {
    this._fileInput.click();
  }

  _handleFileSelect(e) {
    const file = e.target.files[0];
    if (file) {
      this.file = file;
      this.dispatchEvent(new CustomEvent('file-selected', {
        detail: { file: this.file },
        bubbles: true,
        composed: true
      }));
      // Reset the input so the same file can be selected again
      e.target.value = '';
    }
  }

  async upload(data = null) {
    if (this.file) {
      document.dispatchEvent(new CustomEvent('before-upload', { 
        detail: { url: this.url, data }, 
        bubbles: true, 
        composed: true 
      }));
      
      await this.uploadFiles(this.url, [this.file], data);
      
      // Clear file after successful upload
      this.file = null;
    }
  }
}

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