<template>
  <q-dialog ref="dialogRef">

    <q-card class="dialog-card">

      <div class="dialog-title">
        {{ t('provider.dashboard.refuse_opportunity_dialog.title') }}
      </div>

      <div class="dialog-description">
        {{ t('provider.dashboard.refuse_opportunity_dialog.description') }}
      </div>

      <div class="buttons">

        <q-btn
          flat
          no-caps
          :label="t('provider.dashboard.refuse_opportunity_dialog.btn_cancel')"
          class="cancel-btn"
          @click="onDialogCancel"
        />

        <q-btn
          unelevated
          no-caps
          :label="t('provider.dashboard.refuse_opportunity_dialog.btn_confirm')"
          class="refuse-btn"
          @click="refuseOpportunityHandler"
        />

      </div>

    </q-card>

  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar'
import { useI18n } from 'vue-i18n'

import { refuseOpportunity } from 'src/api/opportunities'

const { t } = useI18n()

const props = defineProps({
  opportunityId: {
    type: Number,
    required: true
  },

  providerId: {
    type: Number,
    required: true
  }
})

defineEmits([
  ...useDialogPluginComponent.emits
])

const {
  dialogRef,
  onDialogOK,
  onDialogCancel
} = useDialogPluginComponent()

const refuseOpportunityHandler = async () => {
  try {

    await refuseOpportunity(
      props.opportunityId,
      props.providerId
    )

    onDialogOK()

  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped lang="scss">
.dialog-card {
  width: 90%;
  max-width: 360px;

  border-radius: 28px;

  padding: 28px 22px;

  background: white;
}

.dialog-title {
  font-size: 20px;
  font-weight: 700;

  text-align: center;

  color: #4b4b4b;
}

.dialog-description {
  margin-top: 14px;

  font-size: 14px;
  line-height: 1.6;

  text-align: center;

  color: #7a7a7a;
}

.buttons {
  display: flex;

  gap: 14px;

  margin-top: 30px;
}

.cancel-btn,
.refuse-btn {
  flex: 1;

  height: 50px;

  border-radius: 18px;

  font-size: 14px;
  font-weight: 700;
}

.cancel-btn {
  background: #f4f4f5;

  color: #666;

  border: 1px solid #ececec;
}

.refuse-btn {
  background: linear-gradient(
    90deg,
    #7c5cff,
    #9f7aea
  );

  color: white;

  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.25);
}
</style>