<template>
  <div class="simple-file-upload">
    <button-with-icon-and-text
      icon="document-icon"
      text="Dokument hochladen"
      v-if="!value"
      @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 ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';

  export default {
    props: ['value'],

    components: {
      ButtonWithIconAndText,
      SimpleFileUploadHiddenInput,
      DocumentIcon,
    },

    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 {
    width: 25px;
    height: 25px;
    overflow: hidden;

    &__icon {
      width: 25px;
      fill: $color-silver-dark;
    }

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

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