<template>
  <div class="custom-form-file-container">
    <label>
      <b-modal
        :id="`modal-${id}`"
        body-class="modal-file-body"
        :title="$t('pageKvm.addImage_modal')"
        hide-footer
      >
        <div class="file-input_container">
          <b-form-file
            :id="id"
            v-model="file"
            :accept="accept"
            :disabled="disabled"
            :state="state"
            placeholder="Нажмите на область или перетащите в нее файл"
            drop-placeholder="Отпустите, чтобы добавить файл"
            @input="$emit('input', file)"
          >
          </b-form-file>
        </div>
      </b-modal>
      <b-button
        size="lg"
        class="add-file-btn"
        :class="{
          disabled,
          'btn-secondary': isSecondary,
          'btn-primary': !isSecondary,
        }"
        @click="$bvModal.show(`modal-${id}`)"
      >
        {{ $t('global.fileUpload.browseText') }}
      </b-button>
      <slot name="invalid"></slot>
    </label>
    <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
      {{ file ? file.name : '' }}
      <b-button
        variant="light"
        class="px-2 ml-auto"
        :disabled="disabled"
        @click="file = null"
        ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
          class="sr-only"
          >{{ $t('global.fileUpload.clearSelectedFile') }}</span
        >
      </b-button>
    </div>
  </div>
</template>

<script>
import { BFormFile } from 'bootstrap-vue';
import IconClose from '@carbon/icons-vue/es/close/20';

export default {
  name: 'FormFile',
  components: { BFormFile, IconClose },
  props: {
    id: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    accept: {
      type: String,
      default: '',
    },
    state: {
      type: Boolean,
      default: true,
    },
    variant: {
      type: String,
      default: 'secondary',
    },
  },
  data() {
    return {
      file: null,
    };
  },
  computed: {
    isSecondary() {
      return this.variant === 'secondary';
    },
  },
  watch: {
    file() {
      if (this.file) {
        this.$bvModal.hide(`modal-${this.id}`);
      } else {
        this.$emit('input', this.file);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.form-control-file {
  opacity: 0;
  height: 0;
  &:focus + span {
    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
  }
}

// Get mouse pointer on complete element
.add-file-btn {
  position: relative;
  &.disabled {
    border-color: gray('400');
    background-color: gray('400');
    color: gray('600');
    box-shadow: none !important;
  }
}

.clear-selected-file {
  display: flex;
  align-items: center;
  background-color: theme-color('light');
  .btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;

    &:focus {
      box-shadow: inset 0 0 0 2px theme-color('primary');
    }
  }
}

.file-input_container {
  width: 100%;
  height: 400px;
  background-color: $surface-secondary;
  border-top: 1px solid #f3f4f5;
  border-radius: 0 0 16px 16px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-form-file-container {
  label {
    margin-bottom: 0;
  }
}
</style>
