dees-catalog/ts_web/elements/dees-input-fileupload/component.ts

import { DeesContextmenu } from '../dees-contextmenu.js';
import { DeesInputBase } from '../dees-input-base.js';
import { demoFunc } from './demo.js';
import { fileuploadStyles } from './styles.js';
import { renderFileupload } from './template.js';
import '../dees-icon.js';
import '../dees-label.js';

import {
  customElement,
  type TemplateResult,
  property,
} from '@design.estate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'dees-input-fileupload': DeesInputFileupload;
  }
}

@customElement('dees-input-fileupload')
export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
  public static demo = demoFunc;


  @property({
    attribute: false,
  })
  public value: File[] = [];

  @property()
  public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';

  @property({ type: Boolean })
  public isLoading: boolean = false;

  @property({
    type: String,
  })
  public buttonText: string = 'Upload File...';

  @property({ type: String })
  public accept: string = '';

  @property({ type: Boolean })
  public multiple: boolean = true;

  @property({ type: Number })
  public maxSize: number = 0; // 0 means no limit

  @property({ type: Number })
  public maxFiles: number = 0; // 0 means no limit

  @property({ type: String, reflect: true })
  public validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;

  constructor() {
    super();
  }

  public static styles = fileuploadStyles;

  public render(): TemplateResult {
    return renderFileupload(this);
  }

  public validationMessage: string = '';

  // Utility methods
  public formatFileSize(bytes: number): string {
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    if (bytes === 0) return '0 Bytes';
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
  }

  public getFileType(file: File): string {
    const type = file.type.toLowerCase();
    if (type.startsWith('image/')) return 'image';
    if (type === 'application/pdf') return 'pdf';
    if (type.includes('word') || type.includes('document')) return 'doc';
    if (type.includes('sheet') || type.includes('excel')) return 'spreadsheet';
    if (type.includes('presentation') || type.includes('powerpoint')) return 'presentation';
    if (type.startsWith('video/')) return 'video';
    if (type.startsWith('audio/')) return 'audio';
    if (type.includes('zip') || type.includes('compressed')) return 'archive';
    return 'file';
  }

  public getFileIcon(file: File): string {
    const type = this.getFileType(file);
    const iconMap = {
      'image': 'lucide:image',
      'pdf': 'lucide:file-text',
      'doc': 'lucide:file-text',
      'spreadsheet': 'lucide:table',
      'presentation': 'lucide:presentation',
      'video': 'lucide:video',
      'audio': 'lucide:music',
      'archive': 'lucide:archive',
      'file': 'lucide:file'
    };
    return iconMap[type] || 'lucide:file';
  }

  public canShowPreview(file: File): boolean {
    return file.type.startsWith('image/') && file.size < 5 * 1024 * 1024; // 5MB limit for previews
  }

  private validateFile(file: File): boolean {
    // Check file size
    if (this.maxSize > 0 && file.size > this.maxSize) {
      this.validationMessage = `File "${file.name}" exceeds maximum size of ${this.formatFileSize(this.maxSize)}`;
      this.validationState = 'invalid';
      return false;
    }

    // Check file type
    if (this.accept) {
      const acceptedTypes = this.accept.split(',').map(s => s.trim());
      let isAccepted = false;
      
      for (const acceptType of acceptedTypes) {
        if (acceptType.startsWith('.')) {
          // Extension check
          if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) {
            isAccepted = true;
            break;
          }
        } else if (acceptType.endsWith('/*')) {
          // MIME type wildcard check
          const mimePrefix = acceptType.slice(0, -2);
          if (file.type.startsWith(mimePrefix)) {
            isAccepted = true;
            break;
          }
        } else if (file.type === acceptType) {
          // Exact MIME type check
          isAccepted = true;
          break;
        }
      }
      
      if (!isAccepted) {
        this.validationMessage = `File type not accepted. Please upload: ${this.accept}`;
        this.validationState = 'invalid';
        return false;
      }
    }

    return true;
  }

  public async openFileSelector() {
    if (this.disabled || this.isLoading) return;
    
    // Set loading state
    this.isLoading = true;
    
    const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
    
    // Set up a focus handler to detect when the dialog is closed without selection
    const handleFocus = () => {
      setTimeout(() => {
        // Check if no file was selected
        if (!inputFile.files || inputFile.files.length === 0) {
          this.isLoading = false;
        }
        window.removeEventListener('focus', handleFocus);
      }, 300);
    };
    
    window.addEventListener('focus', handleFocus);
    inputFile.click();
  }

  public removeFile(file: File) {
    const index = this.value.indexOf(file);
    if (index > -1) {
      this.value.splice(index, 1);
      this.requestUpdate();
      this.validate();
      this.changeSubject.next(this);
    }
  }

  public clearAll() {
    this.value = [];
    this.requestUpdate();
    this.validate();
    this.changeSubject.next(this);
  }

  public async updateValue(eventArg: Event) {
    const target: any = eventArg.target;
    this.value = target.value;
    this.changeSubject.next(this);
  }

  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    super.firstUpdated(_changedProperties);
    const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
    inputFile.addEventListener('change', async (event: Event) => {
      const target = event.target as HTMLInputElement;
      const newFiles = Array.from(target.files);
      
      // Always reset loading state when file dialog interaction completes
      this.isLoading = false;
      
      await this.addFiles(newFiles);
      // Reset the input value to allow selecting the same file again if needed
      target.value = '';
    });

    // Handle drag and drop
    const dropArea = this.shadowRoot.querySelector('.maincontainer');
    const handlerFunction = async (eventArg: DragEvent) => {
      eventArg.preventDefault();
      eventArg.stopPropagation();
      
      switch (eventArg.type) {
        case 'dragenter':
        case 'dragover':
          this.state = 'dragOver';
          break;
        case 'dragleave':
          // Check if we're actually leaving the drop area
          const rect = dropArea.getBoundingClientRect();
          const x = eventArg.clientX;
          const y = eventArg.clientY;
          if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
            this.state = 'idle';
          }
          break;
        case 'drop':
          this.state = 'idle';
          const files = Array.from(eventArg.dataTransfer.files);
          await this.addFiles(files);
          break;
      }
    };
    
    dropArea.addEventListener('dragenter', handlerFunction, false);
    dropArea.addEventListener('dragleave', handlerFunction, false);
    dropArea.addEventListener('dragover', handlerFunction, false);
    dropArea.addEventListener('drop', handlerFunction, false);
  }

  private async addFiles(files: File[]) {
    const filesToAdd: File[] = [];
    
    for (const file of files) {
      if (this.validateFile(file)) {
        filesToAdd.push(file);
      }
    }

    if (filesToAdd.length === 0) return;

    // Check max files limit
    if (this.maxFiles > 0) {
      const totalFiles = this.value.length + filesToAdd.length;
      if (totalFiles > this.maxFiles) {
        const allowedCount = this.maxFiles - this.value.length;
        if (allowedCount <= 0) {
          this.validationMessage = `Maximum ${this.maxFiles} files allowed`;
          this.validationState = 'invalid';
          return;
        }
        filesToAdd.splice(allowedCount);
        this.validationMessage = `Only ${allowedCount} more file(s) can be added`;
        this.validationState = 'warn';
      }
    }

    // Add files
    if (!this.multiple && filesToAdd.length > 0) {
      this.value = [filesToAdd[0]];
    } else {
      this.value.push(...filesToAdd);
    }

    this.requestUpdate();
    this.validate();
    this.changeSubject.next(this);
    
    // Update button text
    if (this.value.length > 0) {
      this.buttonText = this.multiple ? 'Add more files' : 'Replace file';
    }
  }

  public async validate(): Promise<boolean> {
    this.validationMessage = '';
    
    if (this.required && this.value.length === 0) {
      this.validationState = 'invalid';
      this.validationMessage = 'Please select at least one file';
      return false;
    }
    
    // Validate all files
    for (const file of this.value) {
      if (!this.validateFile(file)) {
        return false;
      }
    }
    
    this.validationState = 'valid';
    return true;
  }

  public getValue(): File[] {
    return this.value;
  }

  public setValue(value: File[]): void {
    this.value = value;
    this.requestUpdate();
    if (value.length > 0) {
      this.buttonText = this.multiple ? 'Add more files' : 'Replace file';
    } else {
      this.buttonText = 'Upload File...';
    }
  }

  public updated(changedProperties: Map<string, any>) {
    super.updated(changedProperties);
    
    if (changedProperties.has('value')) {
      this.validate();
    }
  }
}