<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: 50vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("polling setting") }}
            </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 style="max-height: 70vh; width: 50vw" class="scroll">
          <q-list>
            <q-item>
              <q-item-section avatar>
                <div class="text-h6 q-pb-md">
                  {{ $t("polling name") }}:
                </div></q-item-section
              >
              <q-item-section
                ><q-input
                  v-model="polling_name"
                  lazy-rules
                  :placeholder="$t('please input polling name')"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || $t('Please type something'),
                  ]"
              /></q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-table
                  style="height: 50vh"
                  :rows="datas"
                  :columns="columns"
                  virtual-scroll
                  :title="$t('polling data') + ':'"
                  hide-bottom
                  color="primary"
                  row-key="name"
                  :loading="loading"
                  :rows-per-page-options="[0]"
                  :virtual-scroll-sticky-size-start="48"
                  @row-contextmenu="onContextMenu"
                  ref="polling_table"
                >
                  <template v-slot:loading>
                    <q-inner-loading showing color="primary" />
                  </template>
                  <template v-slot:body-cell="props">
                    <q-td :props="props">
                      <div v-if="props.col.name == 'index'">
                        {{ props.pageIndex + 1 }}
                      </div>
                      <div v-else-if="props.col.name == 'uuid'" class="fit">
                        <q-popup-edit
                          :ref="'popup_edit' + props.pageIndex"
                          v-model="props.row.uuid"
                        >
                          <q-tree
                            ref="tree"
                            :nodes="$store.state.signal_source_tree"
                            node-key="uuid"
                            labelKey="name"
                            default-expand-all
                          >
                            <template v-slot:default-header="prop">
                              <q-item
                                class="full-width"
                                :clickable="!prop.node.is_group"
                                @click="
                                  (evt) => {
                                    props.row.uuid = prop.node.uuid;
                                    $refs[
                                      'popup_edit' + props.pageIndex
                                    ]?.hide();
                                  }
                                "
                                :style="{
                                  border:
                                    props.value == prop.node.uuid
                                      ? '1px solid #aacceec2'
                                      : 'none',
                                }"
                              >
                                <q-item-section avatar>
                                  <q-icon
                                    :name="
                                      prop.node.is_group
                                        ? 'img:source_icon/group.png'
                                        : getItemIcon(
                                            prop.node.item_data?.window_type
                                          )
                                    "
                                    color="orange"
                                    size="28px"
                                    class="q-mr-sm"
                                  />
                                </q-item-section>
                                <q-item-section>
                                  <div class="text-weight-bold text-primary">
                                    {{ prop.node.name }}
                                  </div>
                                </q-item-section>
                              </q-item>
                            </template>
                          </q-tree>
                        </q-popup-edit>
                        {{
                          signals.find(
                            (element) =>
                              element && element.uuid == props.row.uuid
                          )?.name ?? ""
                        }}
                      </div>
                      <div v-else-if="props.col.name == 'delay'">
                        {{ props.value }}{{ $t("s") }}
                        <q-popup-edit
                          v-model="props.row.delay"
                          :validate="
                            (val) => !isNaN(parseInt(val)) && parseInt(val) > 9
                          "
                          auto-save
                          v-slot="scope"
                        >
                          <q-input
                            v-model="scope.value"
                            type="number"
                            :min="min_delay"
                            dense
                            autofocus
                            :rules="[
                              (val) =>
                                (val != null &&
                                  val != undefined &&
                                  val.toString().length > 0) ||
                                $t('Please type something'),
                              (val) =>
                                parseInt(val) >= 10 ||
                                $t('number must be greater than or equal to ') +
                                  '10',
                            ]"
                          >
                            <template v-slot:append>
                              <span>{{ $t("s") }}</span>
                            </template>
                          </q-input>
                        </q-popup-edit>
                      </div>
                      <div v-else>UNKNOW</div>
                    </q-td>
                  </template>
                </q-table>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>
        <q-separator />

        <q-card-actions align="left">
          <q-btn
            :loading="loading"
            flat
            no-caps
            :label="$t('add row')"
            color="primary"
            @click="addRow(false)"
          />
          <q-space />
          <q-btn
            :loading="loading"
            flat
            :label="$t('Cancel')"
            no-caps
            color="primary"
            v-close-popup
          />
          <q-btn
            ref="accept"
            flat
            :label="$t('Accept')"
            no-caps
            :loading="loading"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
  <div>
    <q-menu :target="target_dom" v-model="show_context_menu">
      <q-list>
        <q-item clickable v-close-popup @click="(evt) => deleteRow()">
          <q-item-section avatar
            ><q-icon name="delete" color="red"
          /></q-item-section>
          <q-item-section>{{ $t("delete row") }}</q-item-section>
        </q-item>
        <q-item
          v-if="false"
          clickable
          v-close-popup
          @click="(evt) => addRow(true)"
        >
          <q-item-section avatar><q-icon name="add" /></q-item-section>
          <q-item-section>{{ $t("add row") }}</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </div>
</template>

<style scoped>
.disable_tree {
  background: #9e9e9e;
  cursor: wait;
  pointer-events: none;
}

.width_5_1 {
  width: 18%;
}
</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 } from "quasar";
import { useI18n } from "vue-i18n";
import { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
import { Common } from "src/common/Common";
import { TableAddRowHelper } from "src/common/TableAddRowHelper";

const __MIN_DELAY = 10;
const __DEFAULT_DELAY = 60;

class TableRow {
  uuid = "";
  delay = __MIN_DELAY;
}

const table_add_row_helper = new TableAddRowHelper();

export default defineComponent({
  name: "ComponentPollingSettingDialog",

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

    const min_delay = ref(__MIN_DELAY);
    let show_dialog = ref(false);

    const polling_table: Ref<any> = ref(null);

    let loading = ref(false);
    let datas: Ref<TableRow[]> = ref([]);
    let signals = ref(GlobalData.getInstance().signal_source);
    let polling_name = ref("");

    const columns = [
      {
        align: "left",
        name: "index",
        required: true,
        label: $t.t("No."),
        sortable: false,
      },
      {
        align: "left",
        name: "uuid",
        required: true,
        label: $t.t("signal source"),
        field: "uuid",
        sortable: false,
      },
      {
        align: "left",
        name: "delay",
        label: $t.t("duration"),
        field: "delay",
        sortable: false,
      },
    ];

    let show_context_menu = ref(false);
    let target_dom: any = ref(document.body.children[0]);
    let current_index = 0;

    let _resolve: any = null;

    return {
      show_dialog,
      polling_table,
      min_delay,
      loading,
      datas,
      columns,
      show_context_menu,
      target_dom,
      signals,
      polling_name,
      loga(a: any) {
        console.log(a);
      },
      showDialog(name: string, options: StringKeyValueEntity[] | null) {
        show_dialog.value = true;
        signals.value = GlobalData.getInstance().signal_source;

        if (options) {
          datas.value = [];
          if (options.length % 2) {
            options.splice(options.length - 1, 1);
          }
          for (let i = 0; i < options.length; i += 2) {
            const item_signal = options[i];
            const item_delay = options[i + 1];
            if (item_signal && item_delay) {
              datas.value.push({
                uuid: item_signal.value,
                delay: parseInt(item_delay.value),
              });
            }
          }
        }
        polling_name.value = name ?? $t.t("new polling");
      },
      showDialogAsync(name: string, options: StringKeyValueEntity[] | null) {
        return new Promise((resolve) => {
          if (_resolve) {
            _resolve();
            _resolve = null;
          }
          _resolve = resolve;
          show_dialog.value = true;
          signals.value = GlobalData.getInstance().signal_source;
          if (options) {
            datas.value = [];

            for (
              let i = 0;
              i < (options.length % 2 ? options.length - 1 : options.length);
              i += 2
            ) {
              const item_signal = options[i];
              const item_delay = options[i + 1];
              if (item_signal && item_delay) {
                datas.value.push({
                  uuid: item_signal.value,
                  delay: parseInt(item_delay.value),
                });
              }
            }
          }
          polling_name.value = name ?? $t.t("new polling");
        });
      },
      resetData() {
        loading.value = false;
        if (_resolve) {
          _resolve();
          _resolve = null;
        }
      },
      addRow(insert_flag: boolean = false) {
        const item = {
          uuid: GlobalData.getInstance().signal_source[0].uuid,
          delay: __DEFAULT_DELAY,
        };
        if (insert_flag) {
          datas.value.splice(current_index + 1, 0, item);
          (<any>this).$refs["popup_edit" + current_index]?.show();
        } else {
          datas.value.push(item);
          table_add_row_helper.showProup({
            refs: (<any>this).$refs,
            ref_name: "popup_edit" + (datas.value.length - 1),
            delay: 5,
            count: 0,
            max_count: 5000,
          });
        }

        signals.value = GlobalData.getInstance().signal_source;
      },
      onContextMenu(
        evt: PointerEvent,
        row: StringKeyValueEntity,
        index: number
      ) {
        evt.preventDefault();
        evt.stopPropagation();

        target_dom.value = evt.srcElement;
        if (row) {
          current_index = index;
          show_context_menu.value = true;
        }
      },
      deleteRow() {
        if (datas.value.length > current_index) {
          datas.value.splice(current_index, 1);
        }
      },
      async onSubmit() {
        loading.value = true;
        try {
          let __datas: StringKeyValueEntity[] = [];
          for (const item of datas.value) {
            if (item) {
              __datas.push({
                key: "operator_play_signal_source",
                value: item.uuid,
              });
              __datas.push({
                key: "param_delay",
                value:
                  item.delay < __MIN_DELAY
                    ? __MIN_DELAY.toString()
                    : item.delay.toString(),
              });
            }
          }
          if (_resolve) {
            _resolve({
              name: polling_name.value,
              datas: __datas,
            });
            _resolve = null;
          }
          show_dialog.value = false;
        } catch {}
        loading.value = false;
      },
      getItemIcon(item_type: string) {
        return Common.getSignalSourceIcon(item_type);
      },
    };
  },
});
</script>
