<!--
  ~ Copyright (C) 2017/2021 e-voyageurs technologies
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<nb-card>
  <nb-card-header class="d-flex justify-content-between align-items-start gap-1 flex-wrap">
    Media Card
    <button
      type="button"
      nbButton
      ghost
      shape="round"
      nbTooltip="Close"
      (click)="cancel()"
    >
      <nb-icon icon="x-lg"></nb-icon>
    </button>
  </nb-card-header>
  <nb-card-body>
    <nb-alert
      class="d-flex align-items-center flex-row gap-1"
      outline="info"
    >
      <nb-icon
        icon="info-circle"
        status="info"
      ></nb-icon>
      At least one of Title, Subtitle or File is required.
    </nb-alert>
    <tock-form-control
      label="Carousel auto"
      name="fillCarousel"
      information="If selected, if there are consecutive cards in the answer and if current connector supports carousel, then consecutive cards will be replaced by a carousel"
    >
      <nb-toggle
        id="fillCarousel"
        name="fillCarousel"
        [(checked)]="media.fillCarousel"
      >
      </nb-toggle>
    </tock-form-control>
    <form #mediaForm="ngForm">
      <tock-form-control
        label="Card title"
        name="titleLabel"
      >
        <input
          nbInput
          fullWidth
          tockAutofocusElement
          id="titleLabel"
          name="titleLabel"
          placeholder="Enter a title"
          [(ngModel)]="media.titleLabel"
        />
      </tock-form-control>
      <tock-form-control
        label="Card subtitle"
        name="subTitle"
      >
        <input
          nbInput
          fullWidth
          id="subTitle"
          name="subTitle"
          placeholder="Enter a subtitle"
          [(ngModel)]="media.subTitleLabel"
        />
      </tock-form-control>

      <!-- File -->
      <p *ngIf="media.file">
        File:
        <a
          href="{{ media.file.url(restService.url) }}"
          target="_blank"
          >{{ media.file.name }}</a
        >
        <img
          *ngIf="media.file.isImage()"
          class="image"
          src="{{ media.file.url(restService.url) }}"
        />
        <button
          nbButton
          (click)="media.file = null; fileUpload = 'upload'"
          ghost
          shape="round"
          status="danger"
          size="medium"
          nbTooltip="Remove"
        >
          <nb-icon icon="trash"></nb-icon>
        </button>
      </p>
      <p *ngIf="!media.file">
        <nb-radio-group (valueChange)="fileTypeChange($event)">
          <nb-radio
            class="inline-radio"
            value="upload"
            [checked]="true"
            nbTooltip="Could be an image, a video or a binary file"
            >File Upload</nb-radio
          >
          <nb-radio
            class="inline-radio"
            value="url"
            nbTooltip="Could be an image, a video or a binary file"
            >External URL</nb-radio
          >
        </nb-radio-group>
        <span
          *ngIf="fileUpload === 'upload'"
          class="file-block"
        >
          <input
            type="file"
            ng2FileSelect
            [uploader]="uploader"
            class="file"
          />
        </span>
        <span
          *ngIf="fileUpload === 'url'"
          class="file-block"
        >
          <input
            nbInput
            type="text"
            name="url"
            fullWidth
            fieldSize="small"
            placeholder="External URL"
            [(ngModel)]="fileExternalUrl"
            (blur)="checkFileName()"
          />
        </span>
      </p>
      <!--- Description -->
      <tock-form-control
        *ngIf="media.file"
        label="File description"
        name="description"
      >
        <input
          nbInput
          fullWidth
          id="description"
          name="description"
          placeholder="Description"
          [(ngModel)]="media.file.descriptionLabel"
        />
      </tock-form-control>
      <hr />
      <div>
        <div class="h6 mb-3">Actions</div>
        <div
          *ngFor="let action of media.actions"
          class="grid mb-2"
        >
          <div class="d-flex flex-column align-self-center">
            <button
              *ngIf="canUpward(action)"
              nbButton
              ghost
              size="small"
              shape="round"
              status="info"
              nbTooltip="Move upward"
              (click)="upward(action)"
            >
              <nb-icon icon="arrow-up"></nb-icon>
            </button>
            <button
              *ngIf="canDownward(action)"
              nbButton
              ghost
              size="small"
              shape="round"
              status="info"
              nbTooltip="Move downward"
              (click)="downward(action)"
            >
              <nb-icon icon="arrow-down"></nb-icon>
            </button>
          </div>
          <tock-form-control
            label="Title"
            name="titleLabel{{ action.internalId }}"
            [boldLabel]="false"
            [hasMargin]="false"
          >
            <input
              tockAutofocusElement
              nbInput
              fieldSize="small"
              id="titleLabel{{ action.internalId }}"
              name="titleLabel{{ action.internalId }}"
              placeholder="Enter a title"
              [(ngModel)]="action.titleLabel"
            />
          </tock-form-control>
          <tock-form-control
            label="Optional action Url"
            name="url{{ action.internalId }}"
            [boldLabel]="false"
            [hasMargin]="false"
          >
            <input
              nbInput
              fieldSize="small"
              id="url{{ action.internalId }}"
              name="url{{ action.internalId }}"
              placeholder="Enter an url"
              [(ngModel)]="action.url"
            />
          </tock-form-control>

          <button
            nbButton
            ghost
            size="small"
            status="danger"
            shape="round"
            nbTooltip="Remove"
            (click)="removeAction(action)"
          >
            <nb-icon icon="trash"></nb-icon>
          </button>
        </div>
      </div>

      <div class="text-center mt-3">
        <button
          nbButton
          status="primary"
          (click)="addAction()"
          size="small"
        >
          <nb-icon icon="plus-circle"></nb-icon>
          Add Action
        </button>
      </div>
    </form>
  </nb-card-body>
  <nb-card-footer class="card-footer-actions">
    <button
      nbButton
      ghost
      size="small"
      (click)="cancel()"
    >
      Cancel
    </button>
    <button
      *ngIf="!create"
      nbButton
      size="small"
      status="danger"
      (click)="remove()"
    >
      Remove
    </button>
    <button
      nbButton
      size="small"
      status="primary"
      (click)="save()"
    >
      {{ create ? 'Create' : 'Update' }}
    </button>
  </nb-card-footer>
</nb-card>
