<template>
  <div class="simple-file-upload">
    <component
      :is="button"
      @click.native="clickUploadCare" />
    <simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)" />
  </div>
</template>

<script>

  import DocumentIcon from '@/components/icons/DocumentIcon';
  import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
  import SimpleFileUploadIcon from '@/components/ui/file-upload/SimpleFileUploadIcon';
  import SimpleFileUploadIconAndText from '@/components/ui/file-upload/SimpleFileUploadIconAndText';

  export default {
    props: {
      value: {
        type: String,
        default: ''
      },
      withText: {
        type: Boolean,
        default: false
      }
    },

    components: {
      SimpleFileUploadHiddenInput,
      DocumentIcon,
      SimpleFileUploadIcon,
      SimpleFileUploadIconAndText
    },

    computed: {
      button() {
        return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
      }
    },

    methods: {
      clickUploadCare() {
        // workaround for styling the uploadcare widget
        let button = this.$el.querySelector('.uploadcare--widget__button');
        button.click();
      }
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/_helpers";

  .simple-file-upload {
    height: 25px;
    overflow: hidden;
    cursor: pointer;

    &__link {
      display: inline-block;
      overflow: hidden;
      width: 25px;
      height: 25px;
    }
  }

  /deep/ .uploadcare--widget {
    display: none;
  }
</style>
