<template>
  <div v-loading="isLoading">
    <div class="purpose-actions">
      <v-button
          v-if="unitType === $options.UNIT_TYPE_INSTITUTION"
          icon="edit"
          @click="goToAdoptionEdit"
      >
        Edytuj Adopcję
      </v-button>
      <v-button
          icon="edit"
          @click="goToPurposeEdit"
      >
        Edytuj cel
      </v-button>
    </div>
    <UnitPurposeItem
        v-if="unitType === $options.UNIT_TYPE_INSTITUTION"
        :total="unitPurposes.heartAdoption.children"
        :progress="unitPurposes.heartAdoption.supportedChildren"
        :label-current-progress="$t(`unitProgressLabels.${$options.UNIT_TYPE_INSTITUTION}.currentProgress`)"
        :label-difference="$t(`unitProgressLabels.${$options.UNIT_TYPE_INSTITUTION}.difference`)"
        :description="unitPurposes.heartAdoption.adoptionContent"
        :title="$t('page_unit.purposes.adoptionTitle')"
    />
    <UnitPurposeItem
        :total="unitPurposes.purpose.moneyPurpose"
        :progress="unitPurposes.purpose.collectedMoney"
        :label-current-progress="$t(`unitProgressLabels.${$options.UNIT_TYPE_EMERGENCY}.currentProgress`)"
        :label-difference="$t(`unitProgressLabels.${$options.UNIT_TYPE_EMERGENCY}.difference`)"
        :description="unitPurposes.purpose.purposeContent"
        :title="unitPurposes.purpose.purposeTitle"
    >
      <template #current-progress="{value}">
        {{ $options.moneyFormat(value) }}
      </template>
      <template #progress-difference="{value}">
        {{ $options.moneyFormat(value) }}
      </template>
    </UnitPurposeItem>
  </div>
</template>

<script>
import UnitPurposeItem from './unit-purpose-item/UnitPurposeItem'
import {
  UNIT_TYPE_INSTITUTION,
  UNIT_TYPE_EMERGENCY
} from '../../../../admin/units/shared/constants/units-constants'
import VButton from '../../../../components/ui/v-button/VButton'

import {moneyFormat} from '../../../../shared/utils/moneyFormat'
import {fetchUnitPurposeList} from '../../services/unit-sevice'

export default {
  name: 'UnitTabPurposes',
  moneyFormat,
  components: {
    UnitPurposeItem,
    VButton
  },
  UNIT_TYPE_INSTITUTION,
  UNIT_TYPE_EMERGENCY,
  props: {
    unitType: {
      type: String
    }
  },
  data() {
    return {
      isLoading: false,
      unitPurposes: {
        heartAdoption: {
          children: 0,
          supportedChildren: 0,
          adoptionContent: ''
        },
        purpose: {
          collectedMoney: 0,
          moneyPurpose: 0,
          purposeContent: '',
          purposeTitle: ''
        }
      }
    }
  },
  created() {
    this.fetchPurposes()
  },
  methods: {
    fetchPurposes() {
      const { unitID } = this.$route.params
      this.isLoading = true
      fetchUnitPurposeList(unitID)
        .then((res) => {
          this.unitPurposes = res
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    goToAdoptionEdit() {
      const {unitID} = this.$route.params
      const adoptionID = this.unitPurposes.heartAdoption.hearthAdoptionId

      this.$router.push({
        name: 'edit_adoption',
        params: {
          unitID,
          adoptionID
        }
      })
    },
    goToPurposeEdit() {
      const {unitID} = this.$route.params
      const purposeID = this.unitPurposes.purpose.purposeId

      this.$router.push({
        name: 'edit_purpose',
        params: {
          unitID,
          purposeID
        }
      })
    }
  }
}
</script>

<style scoped>
.purpose-actions {
  margin-bottom: 1.5em;
}
</style>
