<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="max-width: 80vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("edge blending") }}
            </div>
            <q-space />
            <div>
              <q-btn
                :loading="loading"
                flat
                round
                icon="close"
                :disable="loading"
                color="red"
                v-close-popup
              >
                <q-tooltip>
                  {{ $t("close") }}
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-section class="scroll" style="width: 80vw; height: 70vh">
          <q-card class="fit">
            <q-tabs
              v-model="tab"
              dense
              class="text-grey"
              active-color="primary"
              indicator-color="primary"
              align="justify"
              narrow-indicator
            >
              <q-tab name="setting" :label="$t('blending setting')" />
              <q-tab
                v-if="!loading"
                name="point_setting"
                :label="$t('point correct')"
              />
            </q-tabs>

            <q-separator />

            <q-tab-panels v-model="tab" animated class="q-pa-none q-ma-none">
              <q-tab-panel name="setting"
                ><q-list>
                  <q-item>
                    <q-item-section>
                      <q-checkbox
                        v-model="edge_blending_info.enable_blending"
                        :loading="loading"
                        :disable="loading"
                        :label="$t('enable blending')"
                      />
                    </q-item-section>
                    <q-item-section>
                      <q-checkbox
                        v-model="edge_blending_info.enable_correct"
                        :loading="loading"
                        :disable="loading"
                        :label="$t('enable correct')"
                      />
                    </q-item-section>
                  </q-item>
                  <q-item>
                    <q-item-section avatar class="header_label">
                      {{ $t("width") }}
                    </q-item-section>
                    <q-item-section>
                      <q-input
                        type="number"
                        min="0"
                        max="65535"
                        v-model="edge_blending_info.width"
                        :loading="loading"
                        :disable="loading"
                        lazy-rules
                        :rules="[
                          (val) =>
                            (val && val.toString().length > 0) ||
                            $t('Please type something'),
                        ]"
                      />
                    </q-item-section>
                    <q-item-section avatar class="header_label_2">
                      {{ $t("height") }}
                    </q-item-section>
                    <q-item-section>
                      <q-input
                        min="0"
                        max="65535"
                        v-model="edge_blending_info.height"
                        :loading="loading"
                        :disable="loading"
                        lazy-rules
                        :rules="[
                          (val) =>
                            (val && val.toString().length > 0) ||
                            $t('Please type something'),
                        ]"
                      />
                    </q-item-section>
                  </q-item>
                  <q-item>
                    <q-item-section avatar class="header_label">
                      {{ $t("row") }}
                    </q-item-section>
                    <q-item-section>
                      <q-input
                        min="0"
                        max="65535"
                        v-model="edge_blending_info.row"
                        :loading="loading"
                        :disable="loading"
                        lazy-rules
                        :rules="[
                          (val) =>
                            (val && val.toString().length > 0) ||
                            $t('Please type something'),
                        ]"
                      />
                    </q-item-section>
                    <q-item-section avatar class="header_label_2">
                      {{ $t("col") }}
                    </q-item-section>
                    <q-item-section>
                      <q-input
                        min="0"
                        max="65535"
                        v-model="edge_blending_info.col"
                        :loading="loading"
                        :disable="loading"
                        lazy-rules
                        :rules="[
                          (val) =>
                            (val && val.toString().length > 0) ||
                            $t('Please type something'),
                        ]"
                      />
                    </q-item-section>
                  </q-item>
                  <q-item>
                    <q-item-section avatar class="header_label">
                      {{ $t("correct type") }}
                    </q-item-section>
                    <q-item-section>
                      <q-select
                        :loading="loading"
                        :disable="loading"
                        v-model="edge_blending_info.point_count"
                        :options="edge_correct_type_options"
                        emit-value
                        map-options
                      />
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-tab-panel>

              <q-tab-panel name="point_setting" class="q-pa-none q-ma-none fit">
                <edge-blending-control
                  ref="correct_wall"
                  class="full-width overflow-hidden q-pa-xs"
                  style="height: 62vh"
                  :edge_blending_info="edge_blending_info"
                  :all_points="points"
                >
                </edge-blending-control>
              </q-tab-panel>
            </q-tab-panels>
          </q-card>
        </q-card-section>
        <q-separator v-if="tab == 'setting'" />
        <q-card-actions align="right" v-if="tab == 'setting'">
          <q-btn
            ref="accept"
            flat
            :label="$t('Accept')"
            :loading="loading"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.header_label {
  width: 10%;
}
.header_label_2 {
  width: 10%;
  align-items: center;
}
</style>

<script lang="ts">
import {
  defineComponent,
  ref,
  Ref,
  watch,
  computed,
  onMounted,
  onBeforeUnmount,
  nextTick,
} from "vue";
import { useStore } from "src/store";
import { useQuasar, copyToClipboard } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import EdgeBlendingControl from "src/components/EdgeBlendingControl.vue";

import {
  EdgeBlendingInfo,
  EdgeBlendingPoint,
} from "src/entities/EdgeBlendingEntities";

export default defineComponent({
  name: "ComponentEdgeBlendingDialog",
  components: { EdgeBlendingControl },
  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let loading = ref(false);
    let tab = ref("setting");
    const correct_wall: Ref<any> = ref(null);
    const points: Ref<EdgeBlendingPoint[]> = ref([]);

    const edge_blending_info = ref(new EdgeBlendingInfo());
    const edge_bending_points = ref([new EdgeBlendingPoint()]);
    const edge_correct_type_options = ref([
      {
        label: $t.t("4 point plane correct"),
        value: 4,
      },
      {
        label: $t.t("9 point surface correct"),
        value: 9,
      },
    ]);

    return {
      show_dialog,
      loading,
      tab,
      edge_blending_info,
      edge_bending_points,
      edge_correct_type_options,
      correct_wall,
      points,
      copyToClipboard,
      loga(a: any) {
        console.log(a);
      },
      async showDialog() {
        show_dialog.value = true;
        loading.value = true;
        try {
          const response = await GlobalData.getInstance()
            .getCurrentClient()
            ?.getEdgeBlendingInfo();
          if (response) {
            edge_blending_info.value.enable_blending = response.enable_blending;
            edge_blending_info.value.enable_correct = response.enable_correct;
            edge_blending_info.value.width = response.width;
            edge_blending_info.value.height = response.height;
            edge_blending_info.value.col = response.col;
            edge_blending_info.value.row = response.row;
            edge_blending_info.value.point_count = response.point_count;
            points.value = response.points;
          } else {
            throw $t.t("get edge blending data failed") + "!";
          }
        } catch {
          $q.dialog({
            title: $t.t("Error"),
            message: $t.t("get edge blending data failed") + "!",
            ok: {
              label: $t.t("ok"),
              noCaps: true,
              flat: true,
            },
            cancel: {
              label: $t.t("cancel"),
              noCaps: true,
              flat: true,
            },
          }).onDismiss(() => {
            show_dialog.value = false;
          });
        }

        loading.value = false;
      },
      resetData() {
        loading.value = false;
      },

      async onSubmit() {
        loading.value = true;
        let success = false;

        try {
          const response = await GlobalData.getInstance()
            .getCurrentClient()
            ?.setEdgeBlendingInfo(
              edge_blending_info.value.enable_blending,
              edge_blending_info.value.enable_correct,
              parseInt(edge_blending_info.value.width.toString()),
              parseInt(edge_blending_info.value.height.toString()),
              parseInt(edge_blending_info.value.col.toString()),
              parseInt(edge_blending_info.value.row.toString()),
              parseInt(edge_blending_info.value.point_count.toString())
            );
          if (response) {
            success = response.success;
          } else {
            throw $t.t("set edge blending data failed") + "!";
          }
        } catch {
          success = false;
        }
        $q.notify({
          color: success ? "positive" : "negative",
          icon: success ? "done" : "warning",
          message:
            $t.t("set edge blending data") +
            (success ? $t.t("success") : $t.t("fail")) +
            "!",
          position: "top",
          timeout: 1500,
        });
        loading.value = false;
      },
    };
  },
});
</script>