<template>
  <div class="footer-navigation">
    <div class="info-box" v-if="agreement">
      <div class="content">
        <b-row align-v="center">
          <b-col cols="1" class="pr-0">
            <!--TODO vue-bootstrap checkbox having issue with vee-validate fix later-->
            <input
              name="enrol-agreement-checkbox"
              :value="1"
              v-model="enrolmentData.agreement"
              v-validate="'required'"
              type="checkbox"
            />
          </b-col>
          <b-col :class="{ 'text-danger animated flash': errors.has('enrol-agreement-checkbox') }">
            <div class="title">
              {{ $t(title) }}
            </div>
            <span>
              {{ $t(content1) }}
              <b-link target="_blank" :href="getTncUrl()"> {{ $t('Enrolment.Agreement.tnc.Title') }} </b-link
              >{{ $t(content2) }}
            </span>
          </b-col>
        </b-row>
      </div>
      <div class="content mt-3">
        <b-row align-v="center">
          <b-col cols="1" class="pr-0">
            <input
              name="enrol-agreement-checkbox-2"
              :value="1"
              v-model="enrolmentData.agreement1"
              v-validate="'required'"
              type="checkbox"
            />
          </b-col>
          <b-col :class="{ 'text-danger animated flash': errors.has('enrol-agreement-checkbox') }">
            <span>{{ $t(content3) }}</span>
          </b-col>
        </b-row>
      </div>
    </div>
    <hr />
    <div class="navigation">
      <b-container>
        <b-row :class="footerNavigatorClass">
          <b-col cols="auto" class="pl-0">
            <b-button size="lg" variant="outline-primary" class="px-4" @click="prevAction()">
              {{ previous }}
            </b-button>
          </b-col>
          <b-col cols="auto" class="px-0">
            <b-button size="lg" variant="primary" class="px-4" @click="conditionNext()">
              {{ next }}
            </b-button>
          </b-col>
        </b-row>
      </b-container>
    </div>
  </div>
</template>
<script>
import { mapMasterDataId } from '@/app/_global/mixins'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'EnrolmentSteppedFooterNavigation',
  props: {
    title: {
      type: String,
      default: 'Enrolment.Agreement.Title',
    },
    content1: {
      type: String,
      default: 'Enrolment.Agreement.Content1.Title',
    },
    content2: {
      type: String,
      default: 'Enrolment.Agreement.Content1.Title2',
    },
    content3: {
      type: String,
      default: 'Enrolment.Agreement.Content2.Title',
    },
    enrolmentData: {
      type: Object,
      required: true,
    },
    previous: {
      type: String,
    },
    next: {
      type: String,
    },
    prevAction: {
      type: Function,
    },
    nextAction: {
      type: Function,
    },
    validateAndSave: {
      type: Function,
    },
    validateStatus: {
      type: Boolean,
      default: false,
    },
    agreement: {
      type: Boolean,
      default: false,
    },
    footerNavigatorClass: {
      type: [String, Array],
      default: () => ['justify-content-between'],
    },
  },
  inject: ['$validator'],
  computed: {
    ...mapGetters(['getEformLinkData']),
    ...mapGetters('enrolment', ['getEnrolCountryId']),
    ...mapMasterDataId({
      SMART_LIBRARY_EFORM_FILE_TYPE: {
        tncId: 'TNC',
      },
    }),
  },
  mounted() {
    this.getEformLink([this.tncId])
  },
  methods: {
    ...mapActions(['getEformLink']),
    conditionNext() {
      let self = this
      if (typeof self.validateAndSave === 'function') {
        self.validateAndSave().then(status => {
          if (status !== false) {
            self.$nextTick(() => {
              self.nextAction()
            })
          }
        })
      } else {
        self.$nextTick(() => {
          self.nextAction()
        })
      }
    },
    getTncUrl() {
      if (this.getEformLinkData[0] !== undefined) {
        return this.getEformLinkData[0].link
      }
    },
  },
}
</script>
