<template>
  <q-card class="no-shadow">
    <q-card-section class="q-gutter-y-md">
      <div class="q-gutter-y-md" v-if="recommendation">
        <q-expansion-item v-if="rejectBanner" :default-opened="expanded" class="text-grey-7"
          style="border: 1px solid red">
          <template slot="header">
            <div :class="{ 'q-pl-sm': !expanded }" class="full-width flex items-center">
              {{ $t('statements.dmn') }}:<span style="white-space: pre" class="text-black">
                {{ $t('statements.decline') }}</span>
            </div>
          </template>
          <q-card>
            <q-card-section v-if="
              get(recommendation, 'description') &&
              !get(recommendation, 'rejection')
            ">
              <div>
                {{ $t('statements.reason') }}:
                <span class="text-black">{{
                    recommendation.description
                }}</span>
              </div>
            </q-card-section>
            <q-card-section v-else-if="get(recommendation, 'rejection')">
              <template>
                <div v-for="(rec, i) in recommendation.rejection" :key="`${rec.reason}_${i}`" :class="{
                  'bordered-divider': !expanded,
                  'q-pl-sm': !expanded,
                }" class="q-mt-sm">
                  <div v-if="rec.reason">
                    {{ $t('statements.reason') }}:
                    <span class="text-black">{{ rec.reason }}</span>
                  </div>
                  <div v-if="rec.explanation">
                    {{ $t('statements.explanation') }}:
                    <span class="text-black">{{ rec.explanation }}</span>
                  </div>
                </div>
              </template>
            </q-card-section>
          </q-card>
        </q-expansion-item>

        <q-banner v-if="acceptBanner" class="text-grey-7" style="border: 1px solid green">
          <div>
            {{ $t('statements.dmn') }}:
            <span class="text-black">{{ $t('statements.accept') }}</span>
          </div>
        </q-banner>

        <template v-if="manualVerificationsBanner">
          <q-banner class="q-py-md yellow-banner" rounded>
            <div>{{ $t('services.emulation.userCheck') }}</div>
          </q-banner>
        </template>
      </div>
      <base-checks-table 
        table-mode="default" 
        :table-checks="tableChecks" 
        :service="serviceCard"
        :is-emulation-page="true"
      />
      <div v-if="noChecks" class="full-width text-center">
        {{ $t('services.emulation.noChecksResult') }}
      </div>
    </q-card-section>
  </q-card>
</template>

<script>
import get from 'lodash/get';

export default {
  props: {
    tableChecks: Object,
    serviceCard: Object
  },
  computed: {
    recommendation() {
      return this.tableChecks.recommendation;
    },
    acceptBanner() {
      return this.recommendation?.decision === 'Accept';
    },
    rejectBanner() {
      return this.recommendation?.decision === 'Reject';
    },
    manualVerificationsBanner() {
      return this.tableChecks.manualVerificationExist === true;
    },
    noChecks() {
      return !this.tableChecks;
    },
    expanded() {
      const rejection = get(this.recommendation, 'rejection');
      return !(Array.isArray(rejection) && rejection.length > 1);
    }
  },
  methods: {
    get
  }
}
</script>

<style>
</style>