<script setup>
import {ref, defineProps, computed} from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import ConfigurationCategory from "@/components/displays/superuser/configuration/ConfigurationCategory.vue";
import ConfigurationInputNumber from "@/components/displays/superuser/configuration/ConfigurationInputNumber.vue";
import ConfigurationInput from "@/components/displays/superuser/configuration/ConfigurationInput.vue";
import Swal from "sweetalert2";

const props = defineProps({
  customer_number: {
    type: Number,
    required: true,
  },
});

// Define the reactive variables
const inputPrice = ref(null);
const inputDescription = ref(null);

// Define the response variables
const hasFixedPricing = ref(false);
const pricing = ref(null);
const description = ref(null);

const getFixedPricing = async () => {
  // Get the fixed pricing
  await SessionUser.request('/customer/pricing/fixed', 'GET', {
    customer_number: props.customer_number,
  }).then((response) => {
    let responseData = response.data.data;
    console.log(response.data.data, 'Fixed pricing');
    pricing.value = response.data.data.price;
    description.value = response.data.data.description;
    hasFixedPricing.value = true;
  }).catch((error) => {
    console.error(error);
    hasFixedPricing.value = false;
  });
};

const onClickSubmit = async () => {
  // Submit the fixed pricing
  await SessionUser.request('/customer/pricing/fixed', 'POST', {
    customer_number: props.customer_number,
    price: inputPrice.value,
    description: inputDescription.value,
  }).then((response) => {
    console.log(response.data.data, 'Fixed pricing');
    // Get the newly created fixed pricing
    getFixedPricing();
  }).catch((error) => {
    console.error(error);
  });
};

// Check if the input is valid
const isInputValid = computed(() => {
  function isValid(value) {
    return value !== null && value !== undefined && value !== '';
  }
  return isValid(inputPrice.value) && isValid(inputDescription.value);
});

const onClickDelete = async () => {
  // Show the confirmation dialog
  Swal.fire({
    title: SessionUser.objects.global.language.delete + ' ' + SessionUser.objects.global.language.payment.fixed_pricing,
    text: SessionUser.objects.global.language.delete + ' ' + SessionUser.objects.global.language.payment.fixed_pricing + '?',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: SessionUser.objects.global.language.yes,
    cancelButtonText: SessionUser.objects.global.language.no,
  }).then((result) => {
    if (result.isConfirmed) {
      onDeleteConfirmed();
    }
  });
};

const onDeleteConfirmed = async () => {
  // Delete the fixed pricing
  await SessionUser.request('/customer/pricing/fixed', 'DELETE', {
    customer_number: props.customer_number,
  }).then((response) => {
    console.log(response.data.data, 'Deleted fixed pricing');
    // Get the newly created fixed pricing
    getFixedPricing();
  }).catch((error) => {
    console.error(error);
  });
};

getFixedPricing();
</script>

<template>
  <div>
    <!-- If the customer has a fixed price -->
      <ConfigurationCategory
          :module="SessionUser.objects.collectedOrderInvoices.meta.title"
          :title="SessionUser.objects.global.language.payment.method"
          :subtitle="SessionUser.objects.global.language.payment.fixed_pricing"
          icon="fas fa-tag"
        >
          <template #default>
            <!--
            <div class="notification is-warning">
              <p class="has-text-weight-bold">Denne funktion er endnu ikke implementeret i fakturering</p>
              <p>Du kan nu oprette fast pris aftaler, men disse vil endnu ikke blive anvendt i systemet.</p>
            </div>
            -->
            <!-- If the customer has a fixed price -->
            <template v-if="hasFixedPricing">
              <ConfigurationInput
                :disabled="true"
                :title="SessionUser.objects.global.language.payment.fixed_pricing"
                v-bind:value="SessionUser.functions.currency.toLocal(pricing)"
                />
              <ConfigurationInput
                :disabled="true"
                :title="SessionUser.objects.global.language.note"
                v-bind:value="description"
                />
            </template>
            <!-- If the customer does not have a fixed price -->
            <template v-else>
              <div class="field">
                <label class="label">{{ SessionUser.objects.global.language.payment.fixed_pricing }}</label>
                <div class="control">
                  <input
                      class="input"
                      type="number"
                      v-model="inputPrice"
                  />
                </div>
              </div>
              <div class="field">
                <label class="label">{{ SessionUser.objects.global.language.note }}</label>
                <div class="control">
                  <input
                      class="input"
                      type="text"
                      v-model="inputDescription"
                  />
                  <!-- If the field is empty, and the price is not, show a warning -->
                  <template v-if="!isInputValid && inputPrice">
                    <p class="help is-danger">{{ SessionUser.objects.global.language.note }} {{ SessionUser.objects.global.language.required.toLowerCase() }}</p>
                  </template>
                </div>
              </div>
            </template>
            <!-- Buttons -->
            <div class="buttons mt-5">
              <!-- If the customer has a fixed price -->
              <template v-if="hasFixedPricing">
                <button class="button is-fullwidth is-danger is-light" @click="onClickDelete">{{ SessionUser.objects.global.language.delete }} {{ SessionUser.objects.global.language.payment.fixed_pricing.toLowerCase() }}</button>
              </template>
              <!-- If the customer does not have a fixed price -->
              <template v-else>
                <button class="button is-fullwidth" @click="onClickSubmit" v-bind:disabled="!isInputValid">{{ SessionUser.objects.global.language.add }} {{ SessionUser.objects.global.language.payment.fixed_pricing.toLowerCase() }} - {{ SessionUser.functions.currency.toLocal(inputPrice) }}</button>
              </template>
            </div>
          </template>
      </ConfigurationCategory>
  </div>
</template>

<style scoped>

</style>