<template>
  <div class="flex flex-row middle-xs">
    <file-manager
      v-if="open"
      @close="open = false"
      @file="onSelectedFile"
      :maxWidth="maxWidth"
      :maxHeight="maxHeight"
      :minWidth="minWidth"
      :minHeight="minHeight"
      :square="square"
      :extensions="extensions"
    />

    <div
      v-if="label || description"
      class="full-width bottom-margin-x-small"
    >
      <span v-if="label" class="text-dark text-small text-bold visible-block">{{label}}</span>
      <span v-if="description" class="text-gray text-small visible-block">{{description}}</span>
    </div>

    <div
      class="flex-0 background-white border-gray right-margin-medium hidden-overflow cursor-pointer"
      style="width:5rem;height:5rem"
      @click="open = true"
    >
      <img
        v-if="file.thumbnail"
        :src="file.thumbnail ? file.thumbnail : noImage"
        :alt="file.filename ? file.filename : ''"
        width="80"
        height="80"
        class="visible-block"
      />
      <img
        v-else
        :src="thumbnail ? thumbnail : noImage"
        alt=""
        width="80"
        height="80"
        class="visible-block"
      />
      <input
        :name="name"
        ref="input"
        type="hidden"
        :value="file.value ? file.value : value"
      />
    </div>

    <div class="flex-1 text-ellipsis">
      <span v-if="file.filename || !thumbnail" class="text-medium text-dark text-ellipsis visible-block">
        {{file.filename ? file.filename : 'Selecione um arquivo'}}
      </span>
      <div class="flex flex-row">
        <base-button
          size="small"
          class="top-margin-small right-margin-small"
          @click.native="open = true"
        >
          {{file.filename || thumbnail ? 'Trocar' : 'Selecionar'}}
        </base-button>
        <base-button
          v-show="file.filename || thumbnail"
          size="small"
          apperance="outline"
          class="top-margin-small"
          @click.native="onRemoveFile"
        >
          Remover
        </base-button>

        <base-select
          v-if="options"
          class="auto-width left-margin-small top-margin-small"
          name="config_watermark_position"
          :value="optionValue"
          size="small"
          @input="changeOption">
          <option v-for="(value, key) in options" :value="key">{{ value }}</option>
        </base-select>

      </div>
    </div>

    <div
      v-if="error"
      class="full-width text-small text-error text-ellipsis top-margin-x-small"
    >
      {{error}}
    </div>

  </div>
</template>

<script src="./scripts.js" />