<template>
  <q-dialog
    persistent
    v-model="show_dialog"
    @before-hide="resetData"
    @keydown="
      (evt) => {
        if (!loading && evt.keyCode == 27) {
          show_dialog = false;
        }
      }
    "
  >
    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("timer") }}
            </div>
            <q-space />
            <div>
              <q-btn
                :loading="loading"
                flat
                round
                icon="close"
                color="red"
                v-close-popup
              >
                <q-tooltip>
                  {{ $t("close") }}
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-section style="max-height: 68vh; width: 55vw" class="scroll">
          <q-list>
            <q-item>
              <q-item-section avatar class="head_1">
                {{ $t("timer type") }}
              </q-item-section>
              <q-item-section>
                <q-select
                  v-model="timer_entity.direction"
                  :options="[
                    {
                      label: $t('forward timer'),
                      value: true,
                    },
                    {
                      label: $t('backward timer'),
                      value: false,
                    },
                  ]"
                  emit-value
                  map-options
                >
                </q-select>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section avatar class="head_1">
                {{ $t("timer mode") }}
              </q-item-section>
              <q-item-section>
                <q-select
                  v-model="timer_entity.is_relative_time"
                  :options="[
                    {
                      label: $t('relative time'),
                      value: true,
                    },
                    {
                      label: $t('absolute time'),
                      value: false,
                    },
                  ]"
                  emit-value
                  map-options
                >
                </q-select>
              </q-item-section>
            </q-item>
            <q-item v-if="timer_entity.is_relative_time">
              <q-item-section avatar class="head_1">
                {{ $t("duration") }}
              </q-item-section>
              <q-item-section>
                <q-input
                  v-model="timer_entity.relative_time_s"
                  type="number"
                  min="0"
                  max="4294967295"
                  lazy-rules
                  :rules="[
                    (val) =>
                      (val && val.toString().length > 0) ||
                      $t('Please type something'),
                  ]"
                >
                  <template v-slot:append>
                    <span>{{ $t("second") }}</span>
                  </template>
                </q-input>
              </q-item-section>
            </q-item>
            <q-item v-else>
              <q-item-section avatar class="head_1">
                {{
                  timer_entity.direction ? $t("start time") : $t("target time")
                }}
              </q-item-section>
              <q-item-section>
                <q-input
                  filled
                  v-model="timer_entity.absolute_time"
                  :rules="[
                    (v) =>
                      (v &&
                        /^(\d{4})\/(\d{2})\/(\d{2}) (\d{2}):(\d{2}):(\d{2})$/.test(
                          v
                        )) ||
                      $t('time format error'),
                  ]"
                  lazy-rules
                  :hint="
                    $t('example: 2022/01/01 00:00:00') +
                    '(' +
                    $t(
                      'the start time should not exceed the current time, and the target time should not be less than the current time'
                    ) +
                    ')'
                  "
                >
                  <template v-slot:prepend>
                    <q-icon name="event" class="cursor-pointer">
                      <q-popup-proxy
                        cover
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-date
                          v-model="timer_entity.absolute_time"
                          mask="YYYY/MM/DD HH:mm:ss"
                          now-btn
                          with-seconds
                        >
                          <div class="row items-center justify-end">
                            <q-btn
                              v-close-popup
                              label="Close"
                              color="primary"
                              flat
                            />
                          </div>
                        </q-date>
                      </q-popup-proxy>
                    </q-icon>
                  </template>

                  <template v-slot:append>
                    <q-icon name="access_time" class="cursor-pointer">
                      <q-popup-proxy
                        cover
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-time
                          v-model="timer_entity.absolute_time"
                          mask="YYYY/MM/DD HH:mm:ss"
                          format24h
                          now-btn
                          with-seconds
                        >
                          <div class="row items-center justify-end">
                            <q-btn
                              v-close-popup
                              label="Close"
                              color="primary"
                              flat
                            />
                          </div>
                        </q-time>
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section avatar class="head_1">
                {{ $t("font size") }}
              </q-item-section>
              <q-item-section>
                <q-input
                  v-model="timer_entity.font_size"
                  type="number"
                  lazy-rules
                  :rules="[
                    (val) =>
                      (val && val.toString().length > 0) ||
                      $t('Please type something'),
                  ]"
                >
                  <template v-slot:append>
                    <span>pt</span>
                  </template>
                </q-input>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section avatar class="head_1">
                {{ $t("font color") }}
              </q-item-section>
              <q-item-section>
                <q-input
                  v-model="timer_entity.text_color"
                  :rules="['anyColor']"
                >
                  <template v-slot:append>
                    <q-icon name="colorize" class="cursor-pointer">
                      <q-popup-proxy
                        cover
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-color v-model="timer_entity.text_color" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section avatar class="head_1">
                {{ $t("background color") }}
              </q-item-section>
              <q-item-section>
                <q-input
                  :disable="timer_entity.background_transparent"
                  v-model="timer_entity.background_color"
                  :rules="['anyColor']"
                >
                  <template v-slot:append>
                    <q-icon name="colorize" class="cursor-pointer">
                      <q-popup-proxy
                        cover
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-color v-model="timer_entity.background_color" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section avatar class="head_1">
                {{ $t("text") }}
              </q-item-section>
              <q-item-section>
                <q-input v-model="timer_entity.text" />
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-checkbox
                  v-model="timer_entity.background_transparent"
                  left-label
                  :label="$t('background transparent')"
                >
                </q-checkbox>
              </q-item-section>

              <q-item-section>
                <q-checkbox
                  left-label
                  v-model="timer_entity.multiple_lines"
                  :label="$t('multiple lines')"
                >
                </q-checkbox>
              </q-item-section>

              <q-item-section>
                <q-checkbox
                  left-label
                  v-model="timer_entity.show_second"
                  :label="$t('second')"
                >
                </q-checkbox>
              </q-item-section>

              <q-item-section>
                <q-checkbox
                  left-label
                  v-model="timer_entity.show_minute"
                  :label="$t('minute')"
                >
                </q-checkbox>
              </q-item-section>
              <q-item-section>
                <q-checkbox
                  left-label
                  v-model="timer_entity.show_hour"
                  :label="$t('hour_2_')"
                >
                </q-checkbox>
              </q-item-section>
              <q-item-section>
                <q-checkbox
                  left-label
                  v-model="timer_entity.show_day"
                  :label="$t('day')"
                >
                </q-checkbox>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

        <q-separator />
        <q-card-actions>
          <q-space />
          <q-btn
            :loading="loading"
            flat
            no-caps
            :label="$t('close and reset')"
            color="primary"
            v-close-popup
          />
          <q-btn
            ref="accept"
            flat
            no-caps
            :label="$t('close and save')"
            :loading="loading"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.head_1 {
  width: 25%;
}

.head_2 {
  width: 12%;
}
</style>

<script lang="ts">
import { defineComponent, ref, Ref, watch, computed } from "vue";
import { useStore } from "src/store";
import GlobalData from "src/common/GlobalData";
import { useQuasar, date as DateHelper } from "quasar";
import { useI18n } from "vue-i18n";
import TimerWidgetWindowParamEntity from "src/entities/TimerWidgetWindowParamEntity";

export default defineComponent({
  name: "ComponentTimerSignalSourceDialog",
  components: {},

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let loading = ref(false);

    const timer_date = ref("2022/01/01");
    const timer_time = ref("00:00:00");

    let timer_entity: Ref<TimerWidgetWindowParamEntity> = ref(
      new TimerWidgetWindowParamEntity()
    );

    let _resolove: any = null;

    const initialize_properties = (json: string) => {
      if (json) {
        try {
          const temp = JSON.parse(json);

          for (const item of Object.keys(timer_entity.value)) {
            if (typeof temp[item] != "undefined") {
              (<any>timer_entity.value)[item] = temp[item];
            }
          }
        } catch {}
      }
    };

    return {
      show_dialog,
      loading,
      timer_entity,
      timer_date,
      timer_time,

      showDialogAsync(options: any) {
        if (_resolove) {
          _resolove();
          _resolove = null;
        }
        show_dialog.value = true;
        initialize_properties(options);

        return new Promise((resolove) => {
          _resolove = resolove;
        });
      },
      resetData() {
        loading.value = false;
        if (_resolove) {
          _resolove();
          _resolove = null;
        }
      },
      async onSubmit() {
        loading.value = true;
        try {
          if (_resolove) {
            try {
              timer_entity.value.font_size = parseInt(
                timer_entity.value.font_size.toString()
              );
              timer_entity.value.relative_time_s = parseInt(
                timer_entity.value.relative_time_s.toString()
              );
              _resolove(JSON.stringify(timer_entity.value));
            } catch {
              _resolove();
            }
          }
          show_dialog.value = false;
        } catch {}
        loading.value = false;
      },
    };
  },
});
</script>
