<template>
  <div>

    <!-- Header -->
    <ion-header>
      <ion-toolbar :style="'--color: #fff;'">

        <!-- Back Button -->
        <ion-buttons v-show="withBackButton" slot="start">
          <ion-button class="back-button" :style="'padding: 0px; '+(background ? '--color: #fff' : '')" @click="$emit('backButtonClicked')">
            <b-icon class="loc-icon" icon="chevron-left" />
          </ion-button>
        </ion-buttons>

        <!-- Title -->
        <ion-title v-if="title"><span style="font-weight: bold; color: #000;">{{ title }}</span></ion-title>

        <!-- Done Button -->
        <ion-buttons v-show="withDoneButton || isNextButton || isFilterButton" slot="end">
          <ion-button v-if="withDoneButton" class="next-button" @click="$emit('doneButtonClicked')" :style="background ? '--color: #fff' : ''">
            {{ doneButtonText }}
          </ion-button>
          <ion-button v-else-if="isNextButton" class="next-button" :style="'padding: 0px; '+(background ? '--color: #fff' : '')" @click="$emit('doneButtonClicked')">
            <b-icon class="loc-icon" icon="chevron-right" />
          </ion-button>
          <ion-button v-else-if="isFilterButton" class="next-button" :style="'padding: 0px; '+(background ? '--color: #fff' : '')" @click="$emit('doneButtonClicked')">
            <ion-icon name="options"></ion-icon>
          </ion-button>
        </ion-buttons>

        <!-- Close Button -->
        <ion-buttons v-show="withCloseButton" slot="end">
          <ion-button class="next-button" :style="'padding: 0px; '+(background ? '--color: #fff' : '')" @click="closeModal()">
            <ion-icon name="close" style="font-size: 30px"></ion-icon>
          </ion-button>
        </ion-buttons>

      </ion-toolbar>
    </ion-header>

    <!-- Content -->
    <slot name="content"></slot>

    <!-- Footer -->
    <slot name="footer"></slot>

  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    title: { 
      type: String, 
      default: '' ,
    },
    doneButtonText: {
      type: String,
      default: 'Done'
    },
    withCloseButton: {
      type: Boolean,
      default: false,
    },
    withCloseConfirmation: {
      type: Boolean,
      default: false,
    },
    withBackButton: {
      type: Boolean,
      default: false,
    },
    withDoneButton: {
      type: Boolean,
      default: true,
    },
    isNextButton: {
      type: Boolean,
      default: false,
    },
    isFilterButton: {
      type: Boolean,
      default: false,
    },
    closeConfirmationText: { 
      type: String, 
      default: 'Are you sure you want to close it?',
    },
    background: {
      type: String,
    }
  },
  data() {
    return {
      content: 'Content'
    }
  },
  methods: {
    closeModal() {
      if (this.withCloseConfirmation) {
        return this.presentAreYouSureAlert();
      }
      this.$emit('closeButtonClicked');
      return this.$ionic.modalController.dismiss();
    },
    presentAreYouSureAlert() {
      return this.$ionic.alertController
        .create({
          header: 'Alert',
          message: this.closeConfirmationText,
          buttons: [
            {
              text: 'No',
              role: 'cancel',
            },
            {
              text: 'Yes',
              handler: () => {
                this.$emit('closeButtonClicked');
                return this.$ionic.modalController.dismiss();
              },
            },
          ]
        })
        .then(a => a.present());
    },
  }
}
</script>

<style scoped lang="css">
  .back-button {
    --padding-start: 0px;
    color: #ed1556;
  }
  .next-button {
    --padding-end: 0px;
    color: #ed1556;
  }
  .loc-icon {
    font-size: 25px;
  }
</style>