<template>
  <div class="block">
    <label
      for="image_url"
      class="flex block cursor-pointer border-solid border-2 block surface-border border-round text-blue-500"
    >
      <span class="flex-grow-1 px-3 py-2 text-overflow-ellipsis"
        >{{ fileName ?? "Select File ..." }}
      </span>
      <Button
       v-if="fileName"
        text
        icon="pi pi-times"
        severity="danger"
        class="w-5rem right-0 flex-shrink-0"
        @click="clearFile"
      ></Button>
    </label>
    <input
      type="file"
      id="image_url"
      class="hidden"
      accept="image/*"
      @change="changeImg"
    />
    <img
      v-if="preview"
      :src="preview"
      :alt="preview"
      class="block border-round border-solid border-2 surface-border w-12rem block border-cyan-700 mt-2"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";

const fileName = ref(null);
const file = ref(null);
const emits = defineEmits(["update:modelValue",'select']);
const props = defineProps({
  preview: {
    type: String,
    default: null,
  },
  value:{
    type:Object,
    default:{}
  }
});

const changeImg = (event) => {
  fileName.value = event.target.files[0].name;
  emits("update:modelValue", event.target.files[0]);
  emits("select", event.target.files[0]);
};

const clearFile = () => {
  emits("update:modelValue", null);
  fileName.value = null
};
</script>