<div class="message-box container">
  <div class="current-head">
    <h3>쪽지</h3>
    <div class="btn-box">
      <!-- <button mat-icon-button>
        <mat-icon>timer</mat-icon>
      </button>
      <button mat-icon-button>
        <mat-icon> add_comment</mat-icon>
      </button> -->
    </div>
  </div>
  <div class="list-search">
    <div class="searchbox">
      <form [formGroup]="fgSearch" class="w-100-p">
        <mat-form-field floatLabel="never">
          <input
            matInput
            #inputSearch
            type="text"
            maxlength="20"
            placeholder="이름, 제목, 내용 검색"
            value=""
            formControlName="searchInput"
            (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
          />
          <button
            mat-button
            matSuffix
            mat-icon-button
            aria-label="Clear"
            (click)="inputSearch.value = ''; onClickSearchCancel()"
          >
            <mat-icon>close</mat-icon>
          </button>
        </mat-form-field>
      </form>
    </div>
  </div>
  <div *ngIf="!isSearch">
    <mat-tab-group
      #tabs
      mat-stretch-tabs
      animationDuration="0ms"
      [selectedIndex]="0"
      (selectedIndexChange)="onSelectedIndexChange($event)"
    >
      <mat-tab [label]="MessageType.Receive">
        <ng-template mat-tab-label>
          수신
        </ng-template>

        <div *ngFor="let message of messageList">
          <dl>
            <dt>
              <mat-icon
                *ngIf="
                  !!message.resType && message.resType === ContentType.Image
                "
                >image</mat-icon
              >
              <mat-icon
                *ngIf="
                  !!message.resType &&
                  message.resType === ContentType.AttachFile
                "
                >attach_file</mat-icon
              >
              <ul>
                <li>{{ message.userName }}</li>
                <li>{{ message.title }}</li>
              </ul>
            </dt>
            <dd>
              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
            </dd>
          </dl>
        </div>
      </mat-tab>
      <mat-tab [label]="MessageType.Send">
        <ng-template mat-tab-label>
          발신
        </ng-template>

        <div *ngFor="let message of messageList">
          <dl>
            <dt>
              <mat-icon
                *ngIf="
                  !!message.resType && message.resType === ContentType.Image
                "
                >image</mat-icon
              >
              <mat-icon
                *ngIf="
                  !!message.resType &&
                  message.resType === ContentType.AttachFile
                "
                >attach_file</mat-icon
              >
              <ul>
                <li>{{ message.userName }}</li>
                <li>{{ message.title }}</li>
              </ul>
            </dt>
            <dd>
              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
            </dd>
          </dl>
        </div>
      </mat-tab>
      <mat-tab [label]="MessageType.Reservation">
        <ng-template mat-tab-label>
          예약
        </ng-template>

        <div *ngFor="let message of messageList">
          <dl>
            <dt>
              <mat-icon
                *ngIf="
                  !!message.resType && message.resType === ContentType.Image
                "
                >image</mat-icon
              >
              <mat-icon
                *ngIf="
                  !!message.resType &&
                  message.resType === ContentType.AttachFile
                "
                >attach_file</mat-icon
              >
              <ul>
                <li>{{ message.userName }}</li>
                <li>{{ message.title }}</li>
              </ul>
            </dt>
            <dd>
              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
            </dd>
          </dl>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
  <div *ngIf="isSearch">
    <div class="search-sub">
      <form [formGroup]="fgSearchType" class="w-100-p">
        <mat-form-field>
          <mat-select formControlName="searchMessageType" (selectionChange)="onChangeSelection($event)">
            <mat-option [value]="MessageType.All">전체</mat-option>
            <mat-option [value]="MessageType.Receive">수신</mat-option>
            <mat-option [value]="MessageType.Send">발신</mat-option>
            <mat-option [value]="MessageType.Reservation">예약</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-radio-group
          formControlName="searchMessageSearchType"
          aria-label="Select an searchType"
          (change)="onChangeSearchType($event)"
        >
          <mat-radio-button [value]="MessageSearchType.Name" [checked]="true"
            >이름</mat-radio-button
          >
          <mat-radio-button [value]="MessageSearchType.Title"
            >제목</mat-radio-button
          >
          <mat-radio-button [value]="MessageSearchType.Contents"
            >내용</mat-radio-button
          >
        </mat-radio-group>
      </form>
    </div>
    <div *ngFor="let message of messageList">
      <dl>
        <dt>
          <mat-icon
            *ngIf="!!message.resType && message.resType === ContentType.Image"
            >image</mat-icon
          >
          <mat-icon
            *ngIf="
              !!message.resType && message.resType === ContentType.AttachFile
            "
            >attach_file</mat-icon
          >
          <ul>
            <li>{{ message.userName }}</li>
            <li>{{ message.title }}</li>
          </ul>
        </dt>
        <dd>
          {{ message.regDate | dateToStringFormat: 'MM:DD' }}
        </dd>
      </dl>
    </div>
  </div>
</div>
