<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header>
    <mat-card-title>
      <ng-container [ngSwitch]="messageInfo.type">
        <span *ngSwitchCase="MessageType.Receive">{{
          'message.type.messageTypeReceiving' | translate
        }}</span>
        <span *ngSwitchCase="MessageType.Send">{{
          'message.type.messageTypeOutgoing' | translate
        }}</span>
        <span *ngSwitchCase="MessageType.Reservation">{{
          'message.type.messageTypeReservation' | translate
        }}</span>
      </ng-container>
    </mat-card-title>
    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
      <i class="mdi mdi-window-close"></i>
    </button>
  </mat-card-header>
  <mat-card-content>
    <mat-drawer-container
      autosize
      [hasBackdrop]="true"
      class="message-container"
    >
      <div
        fxFlex
        fxLayout="column"
        fxLayoutAlign=" stretch"
        class="message-info"
      >
        <!-- 쪽지 발/수신 프로필 이미지
        <div class="profile">
          <span class="profile-img-mask">
            <img />
          </span>
          <span
            *ngIf="messageInfo.type === MessageType.Receive"
            class="people sender bg-accent-color"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              stroke="currentColor"
              fill="none"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <line class="st0" x1="5.8" y1="14.2" x2="14.2" y2="5.8" />
              <polyline class="st0" points="5.8,5.8 14.2,5.8 14.2,14.2 " />
            </svg>
          </span>
          <span
            *ngIf="messageInfo.type !== MessageType.Receive"
            class="people receiver bg-accent-color"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              stroke="currentColor"
              fill="none"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <line class="st0" x1="14.2" y1="5.8" x2="5.8" y2="14.2" />
              <polyline class="st0" points="14.2,14.2 5.8,14.2 5.8,5.8 " />
            </svg>
          </span>
          <span class="name">{{ getSendReceiverNames() }}</span>
        </div>
      -->

        <div class="title text-accent-darkest">
          {{ messageInfo.title }}
          <span class="btn-menu ">
            <button
              mat-icon-button
              aria-label="message menu"
              class="message-menu"
              #messageMenuTrigger="matMenuTrigger"
              [matMenuTriggerFor]="messageMenu"
            >
              <mat-icon>more_vert</mat-icon>
            </button>
          </span>
        </div>
        <div class="people">
          <span
            *ngIf="messageInfo.type === MessageType.Receive"
            class="people label   bg-accent-color"
            >{{ 'message.sender' | translate }}</span
          >
          <span
            *ngIf="messageInfo.type !== MessageType.Receive"
            class="people label  bg-accent-color bg-warn-color"
            >{{ 'message.receiver' | translate }}</span
          >
          <span class="name">{{ getSendReceiverNames() }}</span>
        </div>
        <div class="date">
          <span
            *ngIf="messageInfo.type === MessageType.Receive"
            class="label bg-accent-color"
            >{{ 'message.receivedTime' | translate }}</span
          >
          <span
            *ngIf="messageInfo.type === MessageType.Send"
            class="label bg-warn-color "
            >{{ 'message.sendingTime' | translate }}</span
          >
          <span
            *ngIf="messageInfo.type === MessageType.Reservation"
            class="label bg-warn-color "
            >{{ 'message.reservationTime' | translate }}</span
          >
          <span *ngIf="messageInfo.type !== MessageType.Reservation">{{
            messageInfo.regDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
          }}</span>
          <span *ngIf="messageInfo.type === MessageType.Reservation">{{
            messageInfo.reservationTime | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
          }}</span>
        </div>
        <perfect-scrollbar>
          <div class="contents">
            <ul>
              <li *ngFor="let cont of contents" class="message-contents">
                <pre *ngIf="cont.resType === ContentType.Text">{{
                  cont.resContent
                }}</pre>
                <img
                  *ngIf="cont.resType === ContentType.Image"
                  [src]="cont.imageSrc"
                  class="thumbnail"
                />
              </li>
            </ul>
          </div>
        </perfect-scrollbar>
        <div *ngIf="attachFile && attachFile.length > 0" class="attachFile">
          <div>
            <div class="title">
              <span *ngIf="isExpiredAttachFile">{{
                'common.file.errors.expired' | translate
              }}</span>
              <button
                mat-flat-button
                class="mat-primary"
                (click)="downloadAttachFileAll()"
              >
                {{ 'common.file.saveAll' | translate }}
              </button>
            </div>

            <ul>
              <li *ngFor="let file of attachFile">
                <div>
                  <span class="mdi" [ngClass]="getFileStatusIcon(file)"></span>
                  <span>{{ file.resContent }}</span>
                </div>
                <span class="file-size">{{ file.resSize | ucapBytes }}</span>
                <a>
                  <span
                    class="mdi mdi-download"
                    *ngIf="file.activeYn"
                    (click)="downloadAttachFileSingle(file)"
                  ></span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <mat-drawer #rightDrawer mode="over" position="end" class="rightDrawer">
        <mat-tab-group
          mat-stretch-tabs
          animationDuration="0ms"
          [selectedIndex]="0"
        >
          <mat-tab>
            <ng-template mat-tab-label>
              {{ 'message.countOfReadUser' | translate }}
              {{ getReadUserCount(true) }}
            </ng-template>
            <mat-list>
              <ng-container *ngFor="let user of receivers">
                <mat-list-item *ngIf="user.readYn">
                  <span>{{ user.userName }}</span>
                  <span>{{
                    user.readDate | ucapDate: 'YYYY-MM-DD HH:mm:ss'
                  }}</span>
                </mat-list-item>
              </ng-container>
            </mat-list>
          </mat-tab>
          <mat-tab>
            <ng-template mat-tab-label>
              {{ 'message.countOfUnreadUser' | translate }}
              {{ getReadUserCount(false) }}
            </ng-template>
            <ul>
              <div>
                {{ 'common.messages.selectAll' | translate }}
                <mat-checkbox
                  #checkbox
                  (change)="onUnreadUserCheckAll(checkbox.checked)"
                  (click)="$event.stopPropagation()"
                >
                </mat-checkbox>
              </div>
              <mat-selection-list
                #unReadUsers
                (selectionChange)="
                  onUnreadUserSelectionChange(
                    unReadUsers.selectedOptions.selected
                  )
                "
              >
                <ng-container *ngFor="let user of receivers">
                  <mat-list-option
                    *ngIf="!user.readYn"
                    [value]="user.userSeq"
                    [disabled]="user.cancelYn"
                    [selected]="isSelectedUnreadUser(user)"
                  >
                    <span>{{ user.userName }}</span>
                  </mat-list-option>
                </ng-container>
              </mat-selection-list>
              <div>
                <button
                  mat-stroked-button
                  [disabled]="unReadUsers.selectedOptions.selected.length === 0"
                  (click)="cancelSendMessageForUsers()"
                  class="mat-primary"
                >
                  {{ 'message.cancelSending' | translate }}
                </button>
              </div>
            </ul>
          </mat-tab>
        </mat-tab-group>
      </mat-drawer>
    </mat-drawer-container>
  </mat-card-content>
  <!-- <mat-card-actions class="button-farm flex-row">
    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
      Confirm
    </button>
  </mat-card-actions> -->
</mat-card>

<mat-menu #messageMenu="matMenu" xPosition="after" yPosition="below">
  <button
    mat-menu-item
    *ngIf="messageInfo.type === MessageType.Send"
    (click)="onClickMessageMenu('MESSAGE_READ')"
  >
    <span>{{ 'message.detailOfViewers' | translate }}</span>
  </button>
  <button
    mat-menu-item
    *ngIf="messageInfo.type === MessageType.Reservation"
    (click)="onClickMessageMenu('MESSAGE_CANCEL')"
  >
    <span>{{ 'message.cancelReservation' | translate }}</span>
  </button>
  <button
    mat-menu-item
    *ngIf="messageInfo.type === MessageType.Reservation"
    (click)="onClickMessageMenu('MESSAGE_UPDATE')"
  >
    <span>{{ 'common.messages.modify' | translate }}</span>
  </button>
  <button
    mat-menu-item
    *ngIf="
      messageInfo.type === MessageType.Send ||
      messageInfo.type === MessageType.Receive
    "
    (click)="onClickMessageMenu('MESSAGE_DEL')"
  >
    <span>{{ 'common.messages.remove' | translate }}</span>
  </button>
</mat-menu>
