<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="withdraw-card bg-surface" :flat="false">
      <div class="row justify-end q-pt-sm q-pr-sm">
        <q-btn flat round dense icon="close" color="grey-6" size="sm" @click="onDialogCancel" />
      </div>

      <q-card-section class="column items-center q-pt-xs q-pb-sm q-px-lg">
        <q-icon name="mdi-bank-transfer-out" color="secondary" size="42px" class="q-mb-sm" />
        <div class="text-text text-center font16 fontbold q-mb-xs">
          {{ $t('provider.payments.withdraw_confirm_title') }}
        </div>
        <div class="withdraw-amount text-secondary text-center">
          {{ formatCurrency(netAmount) }}
        </div>
        <div class="withdraw-summary q-mt-md full-width">
          <div class="row items-center justify-between q-mb-xs">
            <span class="text-caption text-grey-6">{{ $t('provider.payments.withdraw_gross_amount_label') }}</span>
            <span class="text-caption text-weight-bold text-text">{{ formatCurrency(grossAmount) }}</span>
          </div>
          <div class="row items-center justify-between q-mb-xs">
            <span class="text-caption text-grey-6">{{ $t('provider.payments.withdraw_fee_label') }}</span>
            <span class="text-caption text-weight-bold text-negative">
              {{ formatCurrency(-gatewayFeeAmount) }}
            </span>
          </div>
          <q-separator class="q-my-sm" />
          <div class="row items-center justify-between">
            <span class="text-caption text-grey-7 text-weight-bold">{{ $t('provider.payments.withdraw_net_amount_label') }}</span>
            <span class="text-body2 text-weight-bold">{{ formatCurrency(netAmount) }}</span>
          </div>
        </div>
        <div class="text-caption text-grey-6 text-center q-mt-sm">
          {{ $t('provider.payments.withdraw_confirm_message') }}
        </div>
      </q-card-section>

      <q-card-section class="row q-gutter-x-sm q-pt-xs q-pb-lg q-px-lg">
        <q-btn
          unelevated
          rounded
          no-caps
          color="grey-4"
          text-color="grey-8"
          class="col"
          :label="$t('provider.payments.anticipation_confirm_cancel')"
          @click="onDialogCancel"
        />
        <q-btn
          unelevated
          rounded
          no-caps
          color="secondary"
          class="col"
          :label="$t('provider.payments.anticipation_confirm_ok')"
          @click="onDialogOK()"
        />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar';
import { formatCurrency } from 'src/helpers/utils';

defineProps({
  grossAmount: {
    type: Number,
    required: true,
  },
  gatewayFeeAmount: {
    type: Number,
    required: true,
  },
  netAmount: {
    type: Number,
    required: true,
  },
});

defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
</script>

<style scoped>
.withdraw-card {
  width: 320px;
  max-width: 96vw;
  border-radius: 20px !important;
}

.withdraw-amount {
  line-height: 1.2;
}

.withdraw-summary {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
}
</style>
