<div id="dragOverlay" tuiGroup orientation="vertical" [class.show]="isDraggingOverWindow">
  <div class="method" (drop)="onDrop($event)" (dragover)="onDragOver($event)">
    <div class="icon-holder">
      <tui-icon icon="@tui.file-up"/>
    </div>
    <span>{{ "chat.elements.messageBox.uplDrag.upload"|translate }}</span>
  </div>
  <div class="method" style="opacity: 0.5">
    <div class="icon-holder">
      <tui-icon icon="@tui.cloud-sync"/>
    </div>
    <span>{{ "chat.elements.messageBox.uplDrag.transfer"|translate }}</span>
  </div>
</div>

<ng-template [(tuiDialog)]="viewModel().dialogOpen" [tuiDialogOptions]="{label: 'chat.elements.messageBox.fileUploadDialog.label'|translate}">
  @if (filterPictureVideo(viewModel().files()).length != 0) {
    <masonry [maxColSize]="2" style="overflow-y: scroll; height: 200px">
      @for (file of viewModel().files(); track file) {
        @if (file.type == "image") {
          <img [src]="file.blob" style="width: 100%; height: 100%; object-fit: fill;"/>
        }
      }
    </masonry>
  }

  <div tuiGroup orientation="vertical" style="width: 100%">
    @for (file of viewModel().files(); track file) {
      @if (file.type != "image") {
        <div style="background: var(--tui-background-neutral-1); height: 50px; display: flex; align-items: center; padding: 0 10px">
          <span>{{ file.name }}</span>
        </div>
      }
    }
  </div>

  <div style="margin-top: 10px; display: flex; gap: 10px; width: 100%">
    <tui-textfield style="width: 100%">
      <label tuiLabel>{{"chat.elements.messageBox.placeholder"|translate}}</label>
      <textarea
        #caption
        placeholder="{{ 'chat.elements.messageBox.message'|translate }}"
        [(ngModel)]="viewModel().message"
        tuiTextarea
      ></textarea>
    </tui-textfield>

    <button tuiButton iconStart="@tui.send" (click)="sendMessageWithCaption()"></button>
  </div>
</ng-template>

<main>
  <div id="message-box-extension" tuiAppearance="floating" [class.shown]="viewModel().editingMessage()">
    <div id="content">
      @if (viewModel().editingMessage()) {
        <tui-icon icon="@tui.pencil"></tui-icon>
        <span>{{"chat.elements.messageBox.editMessageLabel"|translate}}</span>
        @if (viewModel().editingMessage()!.message == "") {
          <tui-icon icon="@tui.paperclip"></tui-icon>
          <span>{{"chat.elements.messageBox.attachments"|translate}}</span>
        } @else {
          {{viewModel().editingMessage()!.message}}
        }
      }
    </div>

    <button id="close" tuiButton appearance="flat" (click)="viewModel().editingMessage.set(null); viewModel().message.set('');">
      <tui-icon icon="@tui.x"/>
    </button>
  </div>
  <div id="message-box" [style]="'border-radius:'+messageBoxRadius+'px;'" [class.fullWidth]="breakpoint() != 'desktopLarge'">
    <div class="items-left">
      <button tuiButton appearance="flat" (click)="uplInput.click()">
        <tui-icon icon="@tui.file-up"/>
        <input #uplInput type="file" (change)="handleFileInput($event)" multiple hidden/>
      </button>

      <button tuiButton appearance="flat" disabled>
        <tui-icon icon="@tui.cloud-sync"/>
      </button>
    </div>
    <div class="items-middle">
      <textarea (keydown.enter)="viewModel().message.set(''); handleEnterKeydown($event); viewModel().onMessageSend(message.value, null)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
      <span class="placeholder"
            [class.hidden]="message.value != ''">{{ "chat.elements.messageBox.placeholder"|translate }}</span>
    </div>
    <div class="items-right">
      <button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().message.set(''); viewModel().onMessageSend(message.value, null)">
        <tui-icon icon="@tui.send"/>
      </button>
    </div>
  </div>
</main>
