<template>
  <q-dialog ref="dialogRef">
    <q-card class="block-confirm-card shadow-card" style="border-radius: 20px; min-width: 280px;">
      <q-card-section class="text-white text-center q-pa-lg">
        <div class="q-mb-sm font16 fontbold">{{ title }}</div>
        <div class="q-mb-md font12 fontmedium">{{ subtitle }}</div>
        <div v-if="dateLabel" class="font14 fontbold">{{ dateLabel }}</div>
        
        <div v-if="isPeriod" class="row justify-center q-gutter-lg q-mt-md font12 fontbold">
          <q-radio
            v-model="selectedPeriod"
            val="morning"
            :label="$t('profile.availability.morning_hours')"
            color="white"
            dark
            class="text-white"
          />
          <q-radio
            v-model="selectedPeriod"
            val="afternoon"
            :label="$t('profile.availability.afternoon_hours')"
            color="white"
            dark
            class="text-white"
          />
        </div>
      </q-card-section>
      
      <q-card-actions align="center" class="q-pb-xl">
        <q-btn
          rounded
          no-caps
          unelevated
          class="full-width q-mx-lg font14"
          padding="4px 12px"
          style="background-color: #ff70ff; border-radius: 15px;"
          :label="$t('profile.availability.block_btn')"
          :loading="loading"
          :disable="isPeriod && !selectedPeriod"
          @click="onOk"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { useDialogPluginComponent } from 'quasar';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  subtitle: {
    type: String,
    default: ''
  },
  dateLabel: {
    type: String,
    default: ''
  },
  isPeriod: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogOK } = useDialogPluginComponent();
const selectedPeriod = ref('morning');

const onOk = () => {
  onDialogOK(props.isPeriod ? selectedPeriod.value : true);
};
</script>

<style scoped lang="scss">
.block-confirm-card {
  background: #9078ff;
}

</style>
