<script>
  import { t } from '$lib/translations';
  import upload from '$lib/assets/upload.svg';

  export let files;
  export let supportedFormats;
  export let onKeydown;
  export let onClick;
  export let onDrop;
  export let onChange;
</script>

<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<!-- eslint-disable svelte/no-at-html-tags  -->
<div
  id="dropzone"
  tabindex={0}
  role="region"
  on:keydown={onKeydown}
  on:dragover|preventDefault|stopPropagation
  on:drop|preventDefault|stopPropagation={onDrop}
>
  <img src={upload} width="40" height="40" alt="Upload icon" />
  <label id="file-label" for="file-input">{@html $t('viewer.dropzone')}</label>
  <input
    id="file-input"
    type="file"
    name="files[]"
    accept={supportedFormats.join(',')}
    multiple
    on:change={onChange}
    bind:this={files}
  />
  <button on:click|preventDefault={onClick}>{$t('viewer.browse')}</button>
</div>

<style>
  #dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #d3dce6;
    border-radius: 12px;
    width: 100%;
    padding: 15px;
    z-index: 10;
  }

  #file-label {
    z-index: -1;
    margin-top: 10px;
  }

  #file-input {
    display: none;
  }

  button {
    margin-top: 20px;
    padding: 12px 24px;
    background-color: #06345f;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    width: 60%;
    font-weight: bold;
  }

  button:hover {
    color: #fff;
    background-color: #000;
  }

  @media only screen and (max-device-width: 812px) {
    #dropzone {
      width: 100%;
    }

    button {
      width: 100%;
    }
  }
</style>
