<template>
  <Modal
    title="Change Avatar"
    :isActive="isActive"
    acceptText="Update"
    rejectText="Cancel"
    @accept="emitAvatarChange()"
    @close="onColse()"
  >
    <ImagePicker ref="imagePicker" :initialImage="defaultImage" />
  </Modal>
</template>


<script lang="ts">
import Modal from "../../shared/components/Modal/Modal.vue";
import ImagePicker from "./ImagePicker.vue";
export default {
  name: "ChangeAvatarModal",
  components: {
    Modal,
    ImagePicker
  },
  props: ["isActive", "defaultImage"],

  data() {
    return {};
  },
  methods: {
    onColse() {
      this.$emit("onClose");
    },
    emitAvatarChange() {
      const event = {
        isDefaultImage: this.$refs.imagePicker.isDefaultImage,
        image: this.$refs.imagePicker.generateDataUrl("image/png", 0.8)
      };
      this.$emit("onAvatarSelected", event);
    }
  }
};
</script>
