<template>
  <ui-icon-button
    button-type="button"
    color="default"
    type="secondary"
    tooltip="Browse Images"
    icon="search"
    @click.stop.prevent="openPicker"
  />
</template>
<script>

const { UiIconButton } = window.kiln.utils.components;

export default {
  components: {
    UiIconButton
  },
  props: {
    name: {
      type: String,
      required: true,
      default: ''
    },
    schema: {
      type: Object,
      default: () => ({})
    },
    args: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    openPicker() {
      const {
          multiple = false,
          filters = {},
          search = '',
          reopenForm = false
        } = this.args,
        { uri } = this.$store.state.ui.currentForm,
        modalConfig = {
          title: 'Browse Images',
          size: 'large',
          type: 'pyxis-picker',
          data: {
            uri,
            path: this.name,
            multiple,
            filters,
            search,
            value: this.$attrs && this.$attrs.data,

            /*
             * if you want to reopen the form after selecting your images,
             * set `reopenForm: true`
             */
            redirectTo: reopenForm
              ? {
                reopenForm: true,
                uri,
                path: this.$store.state.ui.currentForm.path,
                field: this.name
              }
              : null
          }
        };

      this.$store.dispatch('openModal', modalConfig);
    }
  }
};
</script>
