<script setup>
import { useDialogPluginComponent } from 'quasar'

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

defineEmits({
  ...useDialogPluginComponent.emitsObject,
})

const props = defineProps({
  icon: {
    type: String,
    default: '',
  },
  alt: {
    type: String,
    default: 'Icon',
  },
})

const theme = ref(false)
const animation = ref(true)
</script>

<template>
  <QDialog ref="dialogRef" @hide="onDialogHide">
    <QCard class="dialog">
      <div class="overlay background"></div>
      <div class="overlay content">
        <img
          class="icon-badge user-select-none"
          draggable="false"
          :src="props.icon"
          :alt="props.alt"
        />
        <QCardSection>
          <h3 class="alex text-align-center">Site options</h3>
          <div class="row">
            <div class="col-12 col-sm-6">
              <p>
                <strong>Theme</strong><br />
                Available in all flavors, vanilla and chocolate.
              </p>
              <QToggle
                v-model="theme"
                class="px-5"
                color="black"
                dense
                size="xl"
                :unchecked-icon="mdiWhiteBalanceSunny"
                :checked-icon="mdiWeatherNight"
                icon-color="primary"
                @change="theme = !theme"
              />
              <QCheckbox v-model="theme" />
            </div>
            <div class="col-12 col-sm-6">
              <p>
                <strong>Animation</strong><br />
                Some computers may have issues rendering that gorgeous
                background animation. Enabling it substantially increases power
                consumption.
              </p>
              <QToggle
                v-model="animation"
                color="purple"
                dense
                size="xl"
                :unchecked-icon="mdiStop"
                :checked-icon="mdiPlay"
                @change="theme = !theme"
              />
            </div>
          </div>
          Report a bug
          <QCardActions>
            <QBtn label="OK" @click="onDialogOK" />
          </QCardActions>
        </QCardSection>
      </div>
    </QCard>
  </QDialog>
</template>
