/**
 * Template File for nile-preview component
 */

import './nile-file-preview.css';
import { html, TemplateResult } from 'lit';
import { FilePreviewErrorMessages, RemoveFileDetail } from './types';
import { removeFile, cancelFileUpload } from './utils';
import { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';
import { NileFilePreview } from './nile-file-preview';

 export function getHorizontalUploadingState(
  file: File,
  uploadStatus: number,
  nileFilePreview: NileFilePreview
 ): TemplateResult {
    return html`
      <div class="uploading" part="horizontal-uploading-state">
        <nile-loader width="24" height="24"></nile-loader>
        <div class="progress-bar-container" part="horizontal-progress-bar-container">
          <div class="progress-bar-percent" part="horizontal-progress-bar-percent">
            <p part="horizontal-progress-bar-percent-text">Uploading File...</p>
            <p part="horizontal-progress-bar-percent-value">${uploadStatus}%</p>
          </div>
          <nile-progress-bar
            part="horizontal-progress-bar"
            .value="${uploadStatus}"
          ></nile-progress-bar>
          <p class="horizontal-file-name" part="horizontal-file-name">${file.name}</p>
        </div>
        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name="cancelIcon">
          <nile-icon
            name="close"
            size="14"
            class="icon"
          ></nile-icon>
        </slot>
      </div>
    `;
  }

export function getHorizontalPreviewState(
  url: string,
  file: File,
  originalUrl: string,
  showFileType: boolean
): TemplateResult {
  return html`
    <div class="preview horizontal-div" part="horizontal-preview-state">
      <div class="preview-inner" part="horizontal-preview-inner">
        <div class="preview-image-container" part="horizontal-preview-image-container">
            <img
              class="image-preview"
              src=${url}
              alt=${file.name}
              part="horizontal-preview-image"
            />
        </div>
        <div class="preview-file-info" part="horizontal-preview-file-info">
          <p part="horizontal-preview-file-info-name">
            <slot name="file-name">${file.name}</slot>
          </p>
          <p part="horizontal-preview-file-info-type">
            <slot name="file-type">${getFileType(file, showFileType)}</slot>
            &#8226;
            <slot name="file-size">${formatFileSize(Number(file.size))}</slot>
          </p>
        </div>
      </div>
      <div class="preview-actions" part="horizontal-preview-actions">
        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancel-icon">
          <nile-icon
            name="trash"
            size="14"
            class="icon"
            part="horizontal-preview-actions-icon"
          ></nile-icon>
        </slot>
      </div>
    </div>
  `;
}

export function getHorizontalNoPreviewState(
  file: File,
  originalUrl: string,
  showFileType: boolean
): TemplateResult {
  return html`
    <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
      <div class="no-preview-container" part="horizontal-no-preview-container">
        <div class="document-icon" part="horizontal-no-preview-document-icon">
          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
        </div>
        <div class="preview-file-info" part="horizontal-no-preview-file-info">
          <p part="horizontal-no-preview-file-info-name">
            <slot name="file-name">${file.name}</slot>
          </p>
          <p part="horizontal-no-preview-file-info-type">
            <slot name="file-type">${getFileType(file, showFileType)}</slot>
            &#8226;
            <slot name="file-size">${formatFileSize(Number(file.size))}</slot>
          </p>
        </div>
      </div>
      <div>
        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
          <nile-icon
            name="trash"
            size="14"
            class="icon"
            part="horizontal-no-preview-actions-icon"
          ></nile-icon>
        </slot>
      </div>
    </div>
  `;
}

export function getHorizontalErrorState(
  file: File,
  errorMessage: string,
  originalUrl: string,
  nileFilePreview: NileFilePreview
): TemplateResult {
  truncateString(nileFilePreview);
  return html`
    <div class="error horizontal-div" part="horizontal-error-state">
      <div class="error-container" part="horizontal-error-container">
        <div class="error-icon" part="horizontal-error-icon">
          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
        </div>
        <div class="file-info" part="horizontal-error-file-info">
          <p class="horizontal-file-name" part="horizontal-error-file-info-name">
            <slot name="file-name">
              ${file.name}
            </slot>
          </p>
          ${
            nileFilePreview.isStringTruncated
              ? html`<nile-lite-tooltip .content=${errorMessage}>
                  <span>${errorMessage}</span>
                </nile-lite-tooltip>`
              : html`<span>${errorMessage}</span>`
          }
        </div>
      </div>
      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
          <nile-icon
            name="close"
            size="14"
            class="icon"
            part="horizontal-error-actions-icon"
          ></nile-icon>
        </slot>
    </div>
  `;
}

// vertical states
export function getVerticalUploadingState(
  file: File,
  uploadStatus: number,
  nileFilePreview: NileFilePreview
): TemplateResult {
  return html`
    <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
      <div class="loading" part="vertical-loading">
        <nile-loader width="24" height="24"></nile-loader>
      </div>

      <div class="progress-bar-container" part="vertical-progress-bar-container">
        <div class="progress-bar-percent" part="vertical-progress-bar-percent">
          <p part="vertical-progress-bar-percent-text">Uploading...</p>
          <p part="vertical-progress-bar-percent-value">${uploadStatus}%</p>
        </div>
        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
        <p class="vertical-file-name" part="vertical-file-name">${file.name}</p>
      </div>

      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name="cancelIcon">
        <nile-icon
          name="close"
          size="14"
          class="icon corner-icon"
          part="vertical-uploading-actions-icon"
        ></nile-icon>
      </slot>
    </div>
  `;
}


export function getVerticalPreviewState(
  url: string,
  file: File,
  originalUrl: string,
  showFileType: boolean
): TemplateResult {
  return html`
    <div class="vertical-div vertical-preview" part="vertical-preview-state">
      <div part="vertical-preview-image-container">
        <img
          class="image-preview"
          part="vertical-preview-image"
          src=${url}
          alt=${file.name}
        />
      </div>

      <div class="content-container" part="vertical-preview-file-info">
        <p part="vertical-preview-file-info-name">
          <slot name="file-name">${file.name}</slot>
        </p>
        <p part="vertical-preview-file-info-type">
          <slot name="file-type">${getFileType(file, showFileType)}</slot>
          &#8226;
          <slot name="file-size">${formatFileSize(Number(file.size))}</slot>
        </p>
      </div>

      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
        <nile-icon
          name="trash"
          size="14"
          class="icon corner-icon"
          part="vertical-preview-actions-icon"
        ></nile-icon>
      </slot>
    </div>
  `;
}

export function getVerticalNoPreviewState(
  file: File,
  originalUrl: string,
  showFileType: boolean
): TemplateResult {
  return html`
    <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
      <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
      </div>

      <div class="content-container" part="vertical-no-preview-file-info">
        <p part="vertical-no-preview-file-info-name">
          <slot name="file-name">${file.name}</slot>
        </p>
        <p part="vertical-no-preview-file-info-type">
          <slot name="file-type">${getFileType(file, showFileType)}</slot>
          &#8226;
          <slot name="file-size">${formatFileSize(Number(file.size))}</slot>
        </p>
      </div>

      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
        <nile-icon
          name="trash"
          size="14"
          class="icon corner-icon"
          part="vertical-no-preview-actions-icon"
        ></nile-icon>
      </slot>
    </div>
  `;
}

export function getVerticalErrorState(
  file: File,
  errorMessage: string,
  originalUrl: string,
  nileFilePreview: NileFilePreview
): TemplateResult {
  truncateString(nileFilePreview);
  return html`
    <div class="vertical-div vertical-error" part="vertical-error-state">
      <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
      </div>

      <div class="file-info-vertical-state" part="vertical-error-file-info">
      <p class="vertical-file-name" part="vertical-error-file-info-name">
        <slot name="file-name">${file.name}</slot>
      </p>
        ${
          nileFilePreview.isStringTruncated
            ? html`<nile-lite-tooltip .content=${errorMessage}>
                <span>${errorMessage}</span>
              </nile-lite-tooltip>`
            : html`<span>${errorMessage}</span>`
        }
      </div>

      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
        <nile-icon
          name="close"
          size="14"
          class="icon corner-icon"
          part="vertical-error-actions-icon"
        ></nile-icon>
      </slot>
    </div>
  `;
}
