<template>
  <WoocommerceButton v-if="onlyWooCommerce" />
  <div v-else style="width: 100%">
    <div
      class="ccb-payments"
      :class="{ 'is-live': appStore.getIsLive }"
      v-if="paymentsStatus"
      style="width: 100%"
    >
      <div class="ccb-payments__title">
        {{ translationsStore.getTranslations.paymentMethods }}
        <ProBadge />
      </div>
      <div class="ccb-payments__list">
        <PaymentMethod
          v-for="p in getPayments"
          :type="p"
          :key="p"
          :name="getName"
        />
      </div>
    </div>
    <OrderForm
      style="padding-top: 20px"
      v-if="!payment && paymentsStatus && !paymentAfterSubmitStatus"
      :payment="true"
    />
  </div>
</template>

<script setup lang="ts">
import { toRefs, computed } from "vue";
import { useSettingsStore } from "@/widget/app/providers/stores/settingsStore.ts";
import { IPaymentTypes } from "@/widget/actions/pro-features/payments/paymentTypeRegistry.ts";
import { useTranslationsStore } from "@/widget/app/providers/stores/translationsStore";
import ProBadge from "@/widget/shared/ui/components/Pro-badge/ProBadge.vue";
import PaymentMethod from "@/widget/features/submission/payments/PaymentMethod.vue";
import OrderForm from "@/widget/features/submission/order-form";
import { useAppStore } from "@/widget/app/providers/stores/appStore";
import { useMainStore } from "@/widget/app/providers/stores/mainStore.ts";
import { usePaymentAfterSubmitStore } from "@/widget/app/providers/stores/paymentAfterSubmit.ts";
import WoocommerceButton from "@/widget/features/submission/payments/payment-types/WoocommerceButton.vue";

type Props = {
  payment?: boolean;
};

const props = defineProps<Props>();
const { payment } = toRefs(props);

const translationsStore = useTranslationsStore();
const appStore = useAppStore();

const paymentAfterSubmitStatus = computed(() => {
  return usePaymentAfterSubmitStore().isPaymentAfterSubmit;
});

const getName = computed(() => {
  const calcStore = useMainStore();
  return "paymentMethods_" + calcStore.getCalcId;
});

const getPayments = computed(() => {
  const settingsStore = useSettingsStore();

  const payments: Array<keyof IPaymentTypes> = [];
  const paymentGateway = settingsStore.getPaymentGateway;
  const formSettings = settingsStore.getFormSettings;
  const paymentMethods: string[] = formSettings?.paymentMethods || [];
  const keys: Record<string, string> = {
    cash: "cash_payment",
    woocommerce: "woo_checkout",
  };

  if (paymentGateway) {
    if (
      paymentGateway.cards?.cardPayments?.stripe?.enable &&
      paymentGateway.cards?.cardPayments?.stripe?.publishKey?.length &&
      paymentGateway.cards?.cardPayments?.stripe?.secretKey?.length
    ) {
      payments.push("stripe");
    }

    if (
      paymentGateway.cards?.cardPayments?.razorpay?.enable &&
      paymentGateway.cards?.cardPayments?.razorpay?.keyId?.length &&
      paymentGateway.cards?.cardPayments?.razorpay?.secretKey?.length
    ) {
      payments.push("razorpay");
    }

    if (paymentGateway.paypal?.enable && paymentGateway.paypal.paypalEmail) {
      payments.push("paypal");
    }

    if (paymentGateway.cashPayment?.enable) {
      payments.push("cash");
    }

    if (settingsStore.getWooCheckoutSettings?.enable) {
      payments.push("woocommerce");
    }
  }

  if (
    settingsStore.getFormSettings?.accessEmail &&
    settingsStore.getFormSettings?.payment
  ) {
    return payments.filter((p: string) =>
      paymentMethods.includes(keys[p] ? keys[p] : p),
    );
  }

  return payments;
});

const onlyWooCommerce = computed(() => {
  return (
    getPayments.value.length === 1 &&
    getPayments.value[0] === "woocommerce" &&
    !paymentAfterSubmitStatus.value
  );
});

const paymentsStatus = computed(() => {
  const settingsStore = useSettingsStore();
  const paymentAfterSubmitStore = usePaymentAfterSubmitStore();
  const cashPaymentEnabled =
    settingsStore.getPaymentGateway?.cashPayment?.enable;
  const razorpayEnabled =
    settingsStore.getPaymentGateway?.cards?.cardPayments?.razorpay?.enable;
  const stripeEnabled =
    settingsStore.getPaymentGateway?.cards?.cardPayments?.stripe?.enable;
  const paypalEnabled = settingsStore.getPaymentGateway?.paypal?.enable;
  const wooCheckoutEnabled = settingsStore.getWooCheckoutSettings?.enable;
  const orderFormStatus = settingsStore.getFormSettings?.accessEmail;
  const hasAnyPayment =
    cashPaymentEnabled ||
    razorpayEnabled ||
    stripeEnabled ||
    paypalEnabled ||
    wooCheckoutEnabled;

  if (orderFormStatus && paymentAfterSubmitStore.isPaymentAfterSubmit) {
    return hasAnyPayment;
  }

  return !orderFormStatus && hasAnyPayment;
});
</script>

<style lang="scss">
.ccb-payments {
  &.is-live {
    padding: 15px 15px;
    background: #f7f8fb;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    box-sizing: border-box;
    .ccb-payments__title {
      font-size: 12px;
      font-weight: 700;
      color: #001931;
      margin-bottom: 21px;
      .is-pro {
        top: 0;
      }
    }
    .ccb-payments__list {
      .ccb-payment {
        background-color: #0019310d;
        .ccb-payment-body {
          background-color: transparent;
        }
        label {
          margin-bottom: 0;
        }
        .ccb-payment-header {
          .ccb-payment-header__label {
            font-size: 14px;
            font-weight: 700;
            color: #001931;
          }
        }
      }
    }
  }
  .ccb-payments__title {
    font-size: var(--ccb-summary-text-size);
    font-weight: var(--ccb-field-weight);
    color: var(--ccb-text-color);
    margin-bottom: 6px;

    @media only screen and (max-width: 480px) {
      font-weight: var(--ccb-mobile-field-weight);
      font-size: var(--ccb-mobile-summary-text-size);
    }
  }

  .ccb-payments__list {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .ccb-payment-body {
    border-top: 1px solid #dddddd;
    background: var(--ccb-fields-bg-color);
    padding: 7px 0 10px;

    span {
      font-size: var(--ccb-summary-text-size);
      font-weight: var(--ccb-summary-text-weight);
      color: #00193180 !important;

      @media only screen and (max-width: 480px) {
        font-size: var(--ccb-mobile-summary-text-size);
        font-weight: var(--ccb-mobile-summary-text-weight);
      }
    }
  }
}
</style>
