import {
  AfterContentInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  EventEmitter,
  HostListener,
  Input,
  isDevMode,
  OnChanges,
  OnDestroy,
  OnInit,
  Output,
  SimpleChanges,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';
import {
  FormControl,
  ValidationErrors,
} from '@angular/forms';
import { faFileCsv } from '@fortawesome/pro-solid-svg-icons/faFileCsv';
import { faTimes } from '@fortawesome/pro-solid-svg-icons/faTimes';
import { faUpload } from '@fortawesome/pro-solid-svg-icons/faUpload';
import { filter } from 'rxjs/operators';

import {
  coerceArray,
  coerceNumberProperty,
  inputHasChanged,
  isDragEvent,
  isHTMLInputElement,
  isNumber,
  KEYS,
  TsDocumentService,
  untilComponentDestroyed,
} from '@terminus/fe-utilities';
import { TsButtonThemeTypes } from '@terminus/ui-button';
import { TS_SPACING } from '@terminus/ui-spacing';
import {
  ControlValueAccessorProviderFactory,
  TsReactiveFormBaseComponent,
} from '@terminus/ui-utilities';

import { TsDropProtectionService } from '../drop-protection/drop-protection.service';
import { TsFileImageDimensionConstraints } from '../image-dimension-constraints';
import {
  TS_ACCEPTED_MIME_TYPES,
  TsFileAcceptedMimeTypes,
} from '../mime-types';
import { TsSelectedFile } from '../selected-file/selected-file';


export interface ImageRatio {
  widthRatio: number;
  heightRatio: number;
}

// NOTE: During the last batch of dependency upgrades `DragEvent` began throwing a reference error:
// `ReferenceError: DragEvent is not defined`. A workaround is to assign it first to our own type.
// See https://github.com/thymikee/jest-preset-angular/issues/245#issuecomment-475982348
export type TsFileUploadDragEvent = DragEvent;

/**
 * The maximum file size in bytes
 *
 * NOTE: Currently nginx has a hard limit of 10mb
 */
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
const MAXIMUM_KILOBYTES_PER_FILE = 10 * 1024;

/**
 * Unique ID for each instance
 */
let nextUniqueId = 0;


/**
 * A component that offers classic file uploading or drag and drop file uploading.
 *
 * @example
 * <ts-file-upload
 *              accept="['image/png', 'image/jpg']"
 *              dimensionConstraints="myConstraints" (see TsFileImageDimensionConstraints)
 *              [formControl]="myForm.get('myControl')"
 *              [hideButton]="false"
 *              id="my-id"
 *              [isDisabled]="true"
 *              maximumKilobytesPerFile="{{ 10 * 1024 }}"
 *              [multiple]="false"
 *              [progress]="myUploadProgress"
 *              ratioConstraints="['2:1', '3:4']"
 *              [seedFile]="myFile"
 *              theme="default"
 *              (cleared)="fileWasCleared($event)"
 *              (enter)="userDragBegin($event)"
 *              (exit)="userDragEnd($event)"
 *              (selected)="handleFile($event)"
 *              (selectedMultiple)="handleMultipleFiles($event)"
 * ></ts-file-upload>
 *
 * <example-url>https://getterminus.github.io/ui-demos-release/components/file-upload</example-url>
 */
@Component({
  selector: 'ts-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.scss'],
  host: {
    'class': 'ts-file-upload',
    '(keydown)': 'handleKeydown($event)',
  },
  providers: [ControlValueAccessorProviderFactory<TsFileUploadComponent>(TsFileUploadComponent)],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  exportAs: 'tsFileUpload',
})
export class TsFileUploadComponent extends TsReactiveFormBaseComponent implements OnInit, OnChanges, OnDestroy, AfterContentInit {
  /**
   * Define the default component ID
   */
  protected uid = `ts-file-upload-${nextUniqueId++}`;

  /**
   * A flag that represents an in-progress drag movement
   */
  public dragInProgress = false;

  /**
   * Store the selected file
   */
  public file: TsSelectedFile | undefined;

  /**
   * Define icon references
   */
  public iconCsv = faFileCsv;
  public iconRemove = faTimes;
  public iconUpload = faUpload;

  /**
   * Define the flexbox layout gap
   */
  public layoutGap: string = TS_SPACING.small[0];

  /**
   * Store reference to the generated file input
   */
  private readonly virtualFileInput: HTMLInputElement;

  /**
   * Provide access to the file preview element
   */
  @ViewChild('preview')
  public preview!: ElementRef;

  /**
   * Get the file select button text
   */
  public get buttonMessage(): string {
    return this.dragInProgress ? `Drop File${this.multiple ? 's' : ''}` : `Select File${this.multiple ? 's' : ''}`;
  }

  /**
   * Compose and expose all hints to the template
   *
   * @returns An array of hints
   */
  public get hints(): string[] {
    const hints: string[] = [];
    const types: string = this.acceptedTypes.slice().map(v => v.split('/')[1]).join(', ');
    const allowsImage
      = (this.acceptedTypes.indexOf('image/png') >= 0)
      || (this.acceptedTypes.indexOf('image/jpeg') >= 0)
      || (this.acceptedTypes.indexOf('image/jpg') >= 0);

    if (allowsImage && this.supportedImageDimensions.length > 0) {
      hints.push(`Must be a valid dimension: ${this.supportedImageDimensions}`);
    }

    hints.push(`Must be ${types}`);
    hints.push(`Must be under ${this.maximumKilobytesPerFile.toLocaleString()}kb`);
    if (this.ratioConstraints) {
      hints.push(`Must have valid image ratio of ${this.ratioConstraints.join(' or ')} `);
    }

    return hints;
  }

  /**
   * Compose supported image dimensions as a string
   *
   * @returns A string containing all allowed image dimensions
   */
  private get supportedImageDimensions(): string {
    let myString = '';

    // istanbul ignore else
    if (this.dimensionConstraints) {
      const constraints = this.dimensionConstraints.slice();

      for (const c of constraints) {
        // If not the first item, add a comma between the last item and the new
        if (myString.length > 0) {
          myString += ', ';
        }

        // If a fixed size
        if ((c.height.min === c.height.max) && (c.width.min === c.width.max)) {
          myString += `${c.width.min.toLocaleString()}x${c.height.min.toLocaleString()}`;
        } else {
          // Dealing with a size range
          const height = (c.height.min === c.height.max)
            ? c.height.min.toLocaleString()
            : `${c.height.min.toLocaleString()}-${c.height.max.toLocaleString()}`;
          const width = (c.width.min === c.width.max)
            ? c.width.min.toLocaleString()
            : `${c.width.min.toLocaleString()}-${c.width.max.toLocaleString()}`;
          const range = `${width}x${height}`;
          myString += range;
        }
      }
    }

    return myString;
  }

  /**
   * Define the accepted mime types
   *
   * @param value
   */
  @Input()
  public set accept(value: TsFileAcceptedMimeTypes | TsFileAcceptedMimeTypes[] | undefined) {
    if (value) {
      this._acceptedTypes = coerceArray(value);
    } else {
      this._acceptedTypes = TS_ACCEPTED_MIME_TYPES.slice();
    }
  }
  // NOTE: Setter name is different to allow different types passed in vs returned
  public get acceptedTypes(): TsFileAcceptedMimeTypes[] {
    return this._acceptedTypes;
  }
  private _acceptedTypes: TsFileAcceptedMimeTypes[] = TS_ACCEPTED_MIME_TYPES.slice();

  /**
   * Define maximum and minimum pixel dimensions for images
   *
   * @param value
   */
  @Input()
  public set dimensionConstraints(value: TsFileImageDimensionConstraints | undefined) {
    this._sizeConstraints = value;
  }
  public get dimensionConstraints(): TsFileImageDimensionConstraints | undefined {
    return this._sizeConstraints;
  }
  private _sizeConstraints: TsFileImageDimensionConstraints | undefined;

  /**
   * Create a form control to manage validation messages
   *
   * @param ctrl
   */
  @Input()
  public set formControl(ctrl: FormControl) {
    this._formControl = ctrl ? ctrl : new FormControl();
  }
  public get formControl(): FormControl {
    return this._formControl;
  }
  private _formControl: FormControl = new FormControl();

  /**
   * Define if the 'select files' button should be visible. DO NOT USE.
   */
  @Input()
  public hideButton = false;

  /**
   * Define an ID for the component
   *
   * @param value
   */
  @Input()
  public set id(value: string) {
    this._id = value || this.uid;
  }
  public get id(): string {
    return this._id;
  }
  private _id: string = this.uid;

  /**
   * Define if the component is disabled
   */
  @Input()
  public isDisabled = false;

  /**
   * Define the maximum file size in kilobytes
   *
   * @param value
   */
  @Input()
  public set maximumKilobytesPerFile(value: number) {
    this._maximumKilobytesPerFile = value || MAXIMUM_KILOBYTES_PER_FILE;
  }
  public get maximumKilobytesPerFile(): number {
    return this._maximumKilobytesPerFile;
  }
  private _maximumKilobytesPerFile: number = MAXIMUM_KILOBYTES_PER_FILE;

  /**
   * Define if multiple files may be uploaded
   */
  @Input()
  public multiple = false;

  /**
   * Define the upload progress
   *
   * @param value
   */
  @Input()
  public set progress(value: number) {
    this._progress = coerceNumberProperty(value);
  }
  public get progress(): number {
    return this._progress;
  }
  private _progress = 0;

  /**
   * Define supported ratio for images
   *
   * @param values
   */
  @Input()
  public set ratioConstraints(values: Array<string> | undefined) {
    if (values) {
      for (const value of values) {
        const v = value.split(':');
        const minPartsForValidRatio = 2;
        if ((v.length !== minPartsForValidRatio) || (!isNumber(v[0]) || !isNumber(v[1]))) {
          throw new Error('TsFileUploadComponent: An array of image ratios should be formatted as ["1:2", "3:4"]');
        }
      }
    }
    this._ratioConstraints = this.parseRatioStringToObject(values);
  }
  public get ratioConstraints(): Array<string> | undefined {
    return this.parseRatioToString(this._ratioConstraints);
  }
  private _ratioConstraints: Array<ImageRatio> | undefined;

  /**
   * Seed an existing file (used for multiple upload hack)
   *
   * @param file
   */
  @Input()
  public set seedFile(file: File | undefined) {
    this._seedFile = file;

    if (file) {
      const newFile = new TsSelectedFile(
        file,
        this.dimensionConstraints,
        this.acceptedTypes,
        this.maximumKilobytesPerFile,
        this._ratioConstraints,
      );

      newFile.fileLoaded$.pipe(
        filter((t: TsSelectedFile | undefined): t is TsSelectedFile => t !== undefined),
        untilComponentDestroyed(this),
      ).subscribe(f => {
        this.formControl.setValue(f.file);
        this.selected.emit(f);
        this.setUpNewFile(f);
      });
    }

  }
  public get seedFile(): File | undefined {
    return this._seedFile;
  }
  private _seedFile: File | undefined;

  /**
   * Define the theme
   */
  @Input()
  public theme: TsButtonThemeTypes = 'default';

  /**
   * Event emitted when the user clears a loaded file
   */
  @Output()
  public readonly cleared = new EventEmitter<boolean>();

  /**
   * Event emitted when the user's cursor enters the field while dragging a file
   */
  @Output()
  public readonly enter = new EventEmitter<boolean>();

  /**
   * Event emitted when the user's cursor exits the field while dragging a file
   */
  @Output()
  public readonly exit = new EventEmitter<boolean>();

  /**
   * Event emitted when the user drops or selects a file
   */
  @Output()
  public readonly selected = new EventEmitter<TsSelectedFile>();

  /**
   * Event emitted when the user drops or selects multiple files
   */
  @Output()
  public readonly selectedMultiple = new EventEmitter<File[]>();

  /**
   * HostListeners
   *
   * @param event
   */
  @HostListener('dragover', ['$event'])
  public handleDragover(event: TsFileUploadDragEvent) {
    // istanbul ignore else
    if (!this.isDisabled) {
      this.preventAndStopEventPropagation(event);
      this.enter.emit(true);
      this.dragInProgress = true;
    }
  }

  @HostListener('dragleave', ['$event'])
  public handleDragleave(event: TsFileUploadDragEvent) {
    // istanbul ignore else
    if (!this.isDisabled) {
      this.preventAndStopEventPropagation(event);
      this.exit.emit(true);
      this.dragInProgress = false;
    }
  }

  @HostListener('drop', ['$event'])
  public handleDrop(event: TsFileUploadDragEvent) {
    // istanbul ignore else
    if (!this.isDisabled) {
      this.preventAndStopEventPropagation(event);
      this.dragInProgress = false;
      this.collectFilesFromEvent(event);
    }
  }

  @HostListener('click')
  public handleClick() {
    // istanbul ignore else
    if (!this.isDisabled) {
      this.promptForFiles();
    }
  }


  constructor(
    private documentService: TsDocumentService,
    private elementRef: ElementRef,
    private changeDetectorRef: ChangeDetectorRef,
    private dropProtectionService: TsDropProtectionService,
  ) {
    super();
    this.virtualFileInput = this.createFileInput();
  }

  /**
   * Update the inner value when the formControl value is updated
   *
   * @param value - The value to set
   */
  public updateInnerValue = (value: string): void => {
    this.value = value;

    // NOTE: This `if` is to avoid: `Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges`
    // istanbul ignore else
    // eslint-disable-next-line dot-notation
    if (!this.changeDetectorRef['destroyed']) {
      this.changeDetectorRef.detectChanges();
    }
  };


  /**
   * Enable drop protection
   */
  public ngOnInit(): void {
    this.dropProtectionService.add();
    if (this.formControl) {
      this.formControl.valueChanges.pipe(
        untilComponentDestroyed(this),
      ).subscribe(() => {
        // NOTE: This `if` is to avoid: `Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges`
        // istanbul ignore else
        // eslint-disable-next-line dot-notation
        if (!this.changeDetectorRef['destroyed']) {
          this.changeDetectorRef.detectChanges();
        }
      });
    }
  }


  /**
   * Update the virtual file input when the change event is fired
   */
  public ngAfterContentInit(): void {
    this.virtualFileInput.addEventListener('change', this.onVirtualInputElementChange.bind(this));
    this.updateVirtualFileInputAttrs(this.virtualFileInput);
  }


  /**
   * Update the virtual file input's attrs when specific inputs change
   *
   * @param changes - The changed inputs
   */
  public ngOnChanges(changes: SimpleChanges): void {
    // istanbul ignore else
    if (inputHasChanged(changes, 'multiple') || inputHasChanged(changes, 'accept')) {
      this.updateVirtualFileInputAttrs(this.virtualFileInput);
      this.registerOnChangeFn(this.updateInnerValue);
    }
  }


  /**
   * Remove event listener when the component is destroyed
   */
  public ngOnDestroy(): void {
    // istanbul ignore else
    if (this.virtualFileInput) {
      this.virtualFileInput.removeEventListener('change', this.onVirtualInputElementChange.bind(this));
    }
    this.dropProtectionService.remove();
  }


  /**
   * Handle the 'enter' keydown event
   *
   * @param event - The keyboard event
   */
  public handleKeydown(event: KeyboardEvent): void {
    if (event.code === KEYS.ENTER.code) {
      this.promptForFiles();
      this.elementRef.nativeElement.blur();
    }
  }


  /**
   * Open the file selection window when the user interacts
   */
  public promptForFiles(): void {
    this.virtualFileInput.click();
  }


  /**
   * Remove a loaded file, clear validation and emit event
   *
   * @param event - The event
   */
  public removeFile(event?: Event): void {
    if (event) {
      this.preventAndStopEventPropagation(event);
    }
    this.file = undefined;
    this.clearValidationMessages();
    this.cleared.emit(true);
  }


  /**
   * Create a virtual file input
   *
   * @returns The HTMLInputElement for file collection
   */
  private createFileInput(): HTMLInputElement {
    // eslint-disable-next-line deprecation/deprecation
    const input: HTMLInputElement = this.documentService.document.createElement('input');
    input.setAttribute('type', 'file');
    input.style.display = 'none';
    return input;
  }


  /**
   * Get all selected files from an event
   *
   * @param event - The event
   */
  private collectFilesFromEvent(event: TsFileUploadDragEvent | Event): void {
    let files: FileList | undefined;

    if (isDragEvent(event)) {
      files = (event.dataTransfer && event.dataTransfer.files) ? event.dataTransfer.files : undefined;
    }

    if (event.target && isHTMLInputElement(event.target)) {
      files = event.target.files ? event.target.files : undefined;
    }

    if ((!files || files.length < 1) && isDevMode()) {
      throw Error('TsFileUpload: Event contained no file.');
    }

    // Convert the FileList to an Array
    const filesArray: File[] = files ? Array.from(files) /* istanbul ignore next - Unreachable */ : [];

    // If multiple were selected, simply emit the event and return. Currently, this component only supports single files.
    if (filesArray.length > 1) {
      this.selectedMultiple.emit(filesArray);
      return;
    }

    const file = filesArray[0] ? filesArray[0] /* istanbul ignore next - Unreachable */ : undefined;

    // istanbul ignore else
    if (file) {
      const newFile = new TsSelectedFile(
        file,
        this.dimensionConstraints,
        this.acceptedTypes,
        this.maximumKilobytesPerFile,
        this._ratioConstraints,
      );

      newFile.fileLoaded$.pipe(
        filter((t: TsSelectedFile | undefined): t is TsSelectedFile => !!t),
        untilComponentDestroyed(this),
      ).subscribe(f => {
        this.formControl.setValue(f.file);
        this.selected.emit(f);
        this.setUpNewFile(f);
      });
    }
  }

  /**
   * Register our custom onChange function
   *
   * @param fn - The onChange function
   */
  private registerOnChangeFn(fn: Function): void {
    // istanbul ignore else
    if (this.formControl) {
      this.formControl.registerOnChange(fn);
    }
  }


  /**
   * Set file and set up preview and validations
   *
   * @param file - The file
   */
  private setUpNewFile(file: TsSelectedFile): void {
    if (!file) {
      return;
    }
    this.file = file;
    this.setValidationMessages(file);
    this.changeDetectorRef.markForCheck();
  }


  /**
   * Listen for changes to the virtual input
   *
   * @param event - The event
   */
  private onVirtualInputElementChange(event: Event): void {
    // istanbul ignore else
    if (!this.isDisabled) {
      this.collectFilesFromEvent(event);
      this.virtualFileInput.value = '';
    }
  }


  /*
   * Stops event propagation
   *
   * NOTE: Making this static seems to break our tests.
   */
  private preventAndStopEventPropagation(event: Event): void {
    event.preventDefault();
    event.stopPropagation();
  }


  /**
   * Update the attributes of the virtual file input based on @Inputs
   *
   * @param input - The HTML input element
   */
  private updateVirtualFileInputAttrs(input: HTMLInputElement): void {
    const hasMultipleSetting: boolean = input.hasAttribute('multiple');

    // Should set multiple
    // istanbul ignore else
    if (this.multiple && !hasMultipleSetting) {
      this.virtualFileInput.setAttribute('multiple', 'true');
    }

    // Should remove multiple
    // istanbul ignore else
    if (!this.multiple && hasMultipleSetting) {
      this.virtualFileInput.removeAttribute('multiple');
    }

    // Should set accept
    // istanbul ignore else
    if (this.acceptedTypes) {
      this.virtualFileInput.setAttribute('accept', this.acceptedTypes.toString());
    }
  }


  /**
   * Set validation messages
   *
   * @param file - The file
   */
  private setValidationMessages(file: TsSelectedFile | undefined): void {
    if (!file) {
      return;
    }

    const errors: ValidationErrors = {};
    const responses: {[key: string]: ValidationErrors} = {
      fileSize: {
        valid: false,
        actual: file.size,
        max: this.maximumKilobytesPerFile,
      },
      fileType: {
        valid: false,
        actual: file.mimeType,
        accepted: this.acceptedTypes.join(', '),
      },
      imageDimensions: {
        valid: false,
        actual: file.dimensions,
      },
      imageRatio: {
        valid: false,
        actual: file.width / file.height,
      },
    };

    const validations = Object.keys(file.validations);

    // eslint-disable-next-line @typescript-eslint/prefer-for-of
    for (let i = 0; i < validations.length; i += 1) {
      const key: string = validations[i];
      if (!file.validations[key]) {
        errors[key] = responses[key];
      }
    }

    if (Object.keys(errors).length === 0) {
      this.formControl.setErrors(null);
    } else {
      this.formControl.setErrors(errors);
    }
    this.formControl.markAsTouched();
    this.changeDetectorRef.markForCheck();
  }

  /**
   * Clear all validation messages
   */
  private clearValidationMessages(): void {
    this.formControl.setErrors(null);
    this.changeDetectorRef.markForCheck();
  }

  /**
   * Parse ratio from Array of string to Array of ImageRatio
   *
   * @param ratios - Array of string
   * @returns - Array of ImageRatio
   */
  private parseRatioStringToObject(ratios: Array<string> | undefined): Array<ImageRatio> | undefined {
    if (!ratios) {
      return undefined;
    }
    const parsedImageRatio: Array<ImageRatio> = [];
    ratios.map(r => parsedImageRatio.push({
      widthRatio: Number(r.split(':')[0]),
      heightRatio: Number(r.split(':')[1]),
    }));
    return parsedImageRatio;
  }

  /**
   * Parse ratio from Array of ImageRatio to Array of string
   *
   * @param ratios - Array of ImageRatio
   * @returns - Array of string
   */
  private parseRatioToString(ratios: Array<ImageRatio> | undefined): Array<string> | undefined {
    if (!ratios) {
      return undefined;
    }
    const parsedRatio: Array<string> = [];
    ratios.map(r => parsedRatio.push(`${r.widthRatio.toString()  }:${  r.heightRatio.toString()}`));
    return parsedRatio;
  }

  /**
   * Function for tracking for-loops changes
   *
   * @param index - The item index
   * @returns The unique ID
   */
  public trackByFn(index): number {
    return index;
  }
}