<script setup>
import PageTitle from "@/components/global/PageTitle.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import { ConfigurationSelectOption } from "@/components/displays/superuser/configuration/ConfigurationSelectObject.vue";
import ConfigurationSubPageWrapper
  from "@/views/dashboards/superUserDashboard/configuration/ConfigurationSubPageWrapper.vue";
import ConfigurationCategory from "@/components/displays/superuser/configuration/ConfigurationCategory.vue";
import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
import ConfigurationSelect from "@/components/displays/superuser/configuration/ConfigurationSelect.vue";
import ConfigurationSecretKey from "@/components/displays/superuser/configuration/ConfigurationSecretKey.vue";
import ConfigurationInput from "@/components/displays/superuser/configuration/ConfigurationInput.vue";
import ConfigurationInputNumber from "@/components/displays/superuser/configuration/ConfigurationInputNumber.vue";
import Swal from "sweetalert2";

// Get the department from the route
const router = useRouter()

const enabled = ref(false);
const module_config = ref([]);

const getEnabled = async () => {
  await SessionUser.superUser.modules.stripe.config.enabled.get().then((response) => {
    console.log('Stripe enabled: ', response.data.data);
    enabled.value = response.data.data;
  }).catch((error) => {
    console.log(error);
  });
};

const getModuleConfig = async () => {
  await SessionUser.superUser.modules.stripe.config.get_all().then((response) => {
    let tmp_module_config = response.data.data;
    let tmp_module_config_array = [];
    for (const [key, value] of Object.entries(tmp_module_config)) {
      console.log(`${value.variable}: ${value.value}`);
      tmp_module_config_array.push({
        variable: value.variable,
        value: value.value,
      });
    }
    module_config.value = tmp_module_config_array;
    console.log(module_config.value);
  }).catch((error) => {
    console.log(error);
  });
};

const getModuleConfigValue = (variable) => {
  const config = module_config.value.find((config) => config.variable === variable);
  // Log to the console, what the value was found
  if (config) {
    console.log(`Found value for ${variable}: ${config.value}`);
  } else {
    console.log(`No value found for ${variable}`);
  }
  return config ? config.value : '';
};

const load = async () => {
  await getModuleConfig();
};

load();

const showGetCustomers = async () => {
  await SessionUser.superUser.modules.stripe.functions.customers.list().then((response) => {
    console.log('Stripe customers: ', response.data.data);
    Swal.fire({
      title: 'Stripe customers',
      html: '<pre>' + JSON.stringify(response.data.data, null, 2) + '</pre>',
      showCloseButton: true,
      showCancelButton: false,
      focusConfirm: false,
    });
  }).catch((error) => {
    console.log(error);
  });
};

const showGetProducts = async () => {
  await SessionUser.superUser.modules.stripe.functions.products.list().then((response) => {
    console.log('Stripe products: ', response.data.data);
    Swal.fire({
      title: 'Stripe products',
      html: '<pre>' + JSON.stringify(response.data.data, null, 2) + '</pre>',
      showCloseButton: true,
      showCancelButton: false,
      focusConfirm: false,
    });
  }).catch((error) => {
    console.log(error);
  });
};

const showGetPrices = async () => {
  await SessionUser.superUser.modules.stripe.functions.prices.list().then((response) => {
    console.log('Stripe prices: ', response.data.data);
    Swal.fire({
      title: 'Stripe prices',
      html: '<pre>' + JSON.stringify(response.data.data, null, 2) + '</pre>',
      showCloseButton: true,
      showCancelButton: false,
      focusConfirm: false,
    });
  }).catch((error) => {
    console.log(error);
  });
};
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <ConfigurationSubPageWrapper>
      <template #title>
        <PageTitle title="Stripe configuration" subtitle="The configuration of the Stripe integration" />
      </template>
      <template v-if="module_config.length > 0" #content>
        <ConfigurationCategory
          class="mt-2"
          module="Stripe"
          title="General settings"
          description="The general settings for the Stripe integration."
          icon="fas fa-cogs"
        >
        <ConfigurationSwitch
          class="mt-2"
          module="Stripe"
          title="Enable Stripe"
          description="Enable or disable the Stripe integration."
          icon="fas fa-cogs"
          :value="getModuleConfigValue('enabled') === true"
          :on-switch="SessionUser.superUser.modules.stripe.config.enabled.set"
        />
        </ConfigurationCategory>
        <ConfigurationCategory
          class="mt-2"
          module="Stripe"
          title="API connection settings"
          description="The Stripe API connection settings."
          icon="fas fa-cogs"
        >
          <ConfigurationSecretKey
            class="mt-2"
            module="Stripe"
            title="Secret key (API key)"
            description="The secret key is used to authenticate the API connection."
            icon="fas fa-cogs"
            :isSet="getModuleConfigValue('secret_key') !== ''"
            :on-save="SessionUser.superUser.modules.stripe.config.keys.secret_key.set"
          />
          <ConfigurationInput
            class="mt-2"
            module="Stripe"
            title="Publishable key"
            description="The publishable key is used to authenticate the API connection."
            icon="fas fa-cogs"
            :value="getModuleConfigValue('publishable_key')"
            :on-save="SessionUser.superUser.modules.stripe.config.keys.publishable_key.set"
          />
        </ConfigurationCategory>
        <ConfigurationCategory
          class="mt-2"
          module="Stripe"
          title="Economic integration settings"
          description="The settings for the integration with the Economic system."
          icon="fas fa-cogs"
        >
          <ConfigurationInputNumber
            class="mt-2"
            module="Stripe"
            title="Economic customer number"
            description="The customer used to store the Stripe payments in the Economic system."
            icon="fas fa-cogs"
            :value="parseInt(getModuleConfigValue('economic_customer_number'))"
            :on-save="SessionUser.superUser.modules.stripe.config.keys.economic_customer_number.set"
          />
        </ConfigurationCategory>
        <button class="button is-dark" @click="showGetCustomers">
          <span class="icon">
            <i class="fas fa-users"></i>
          </span>
          <span>Get customers</span>
        </button>
        <button class="button is-dark" @click="showGetProducts">
          <span class="icon">
            <i class="fas fa-box"></i>
          </span>
          <span>Get products</span>
        </button>
        <button class="button is-dark" @click="showGetPrices">
          <span class="icon">
            <i class="fas fa-money-bill-wave"></i>
          </span>
          <span>Get prices</span>
        </button>
      </template>
    </ConfigurationSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>