<template>
  <q-page>
    <q-layout container class="absolute-full shadow-2 rounded-borders">
      <div class="q-pa-sm q-gutter-sm  ">
        <q-drawer side="left" :overlay="true" bordered v-model="drawerLeft" :show-if-above="false" elevated>
          <div class="flex-center absolute-full" style="padding:15px">
            <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
              <EventTree />
            </q-scroll-area>
          </div>

          <div class="flex-center fixed-bottom bg-grey-3 q-pa-md row ">
            <q-btn color="secondary" glossy label="デプロイ" @click="onDeploy" icon="sync" :loading="deployLoading" />
            <q-space></q-space>
            <q-btn-dropdown color="primary" label="保存" icon="save" :loading="saveLoading" >
              <q-list>
                <q-item clickable v-close-popup @click="onSaveVersion">
                  <q-item-section avatar >
                    <q-icon name="bookmark_border"></q-icon>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>新バージョン保存</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup @click="onSaveFlow">
                  <q-item-section avatar >
                    <q-icon name="save" color="primary"></q-icon>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>選択中フローの保存</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup @click="onSaveAllFlow">
                  <q-item-section avatar>
                    <q-icon name="collections_bookmark" color="accent"></q-icon>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>一括保存</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
        </q-drawer>
      </div>
      <q-btn flat dense round
              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
              :style="{'left': fixedLeftPosition}"
              @click="drawerLeft=!drawerLeft" class="expand" />
      <q-breadcrumbs v-if="store.appInfo" class="fixed q-pl-md"
              :style="{'left': fixedLeftPosition}">
        <q-breadcrumbs-el icon="widgets" label="アプリ管理" to="/app" />
        <q-breadcrumbs-el>
          <template v-slot>
            <a class="full-width" :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
              {{ store.appInfo?.name }}
              <q-icon
                class="q-ma-xs"
                name="open_in_new"
                color="grey-9"
              />
            </a>
          </template>
        </q-breadcrumbs-el>
      </q-breadcrumbs>
      <div class="q-pa-md q-gutter-sm" :style="{minWidth: minPanelWidth}">
        <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft?{paddingLeft:'300px'}:{}]">
          <node-item v-if="rootNode!==undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
            :actionNode="rootNode" @addNode="addNode" @nodeSelected="onNodeSelected" @nodeEdit="onNodeEdit"
            @deleteNode="onDeleteNode" @deleteAllNextNodes="onDeleteAllNextNodes" @copyFlow="onCopyFlow"></node-item>
        </div>
      </div>
      <PropertyPanel :actionNode="store.activeNode" v-model:drawerRight="drawerRight" @save-action-props="onSaveActionProps"></PropertyPanel>
    </q-layout>
    <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" min-width="500px" min-height="500px">
      <template v-slot:toolbar>
        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
          <template v-slot:before>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
      <action-select ref="appDg" name="model" :filter="filter"  type="single" @clearFilter="onClearFilter" ></action-select>
    </ShowDialog>
    <!-- save version dialog -->
    <ShowDialog v-model:visible="saveVersionAction" name="新バージョン保存" @close="closeSaveVersionDg" min-width="500px">
      <version-input v-model="versionInfo" />
    </ShowDialog>
    <q-inner-loading
      :showing="initLoading"
      color="primary"
      label="読み込み中..."
    />
  </q-page>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty } from 'src/types/ActionTypes';
import { IAppDisplay, IManagedApp, IVersionInfo } from 'src/types/AppTypes';
import { storeToRefs } from 'pinia';
import { useFlowEditorStore } from 'stores/flowEditor';
import { useAuthStore } from 'stores/useAuthStore';
import { api } from 'boot/axios';

import NodeItem from 'src/components/main/NodeItem.vue';
import ShowDialog from 'components/ShowDialog.vue';
import ActionSelect from 'components/ActionSelect.vue';
import PropertyPanel from 'components/right/PropertyPanel.vue';
import EventTree from 'components/left/EventTree.vue';
import VersionInput from 'components/dialog/VersionInput.vue';
import { FlowCtrl } from '../control/flowctrl';
import { useQuasar } from 'quasar';

const deployLoading = ref(false);
const saveLoading = ref(false);
const initLoading = ref(true);
const drawerLeft = ref(false);
const versionInfo = ref<IVersionInfo>();
const $q = useQuasar();
const store = useFlowEditorStore();
const authStore = useAuthStore();
const route = useRoute()

const appDg = ref();
const prevNodeIfo = ref({
  prevNode: {} as IActionNode,
  inputPoint: ""
});
// const refFlow = ref<ActionFlow|null>(null);
const showAddAction = ref(false);
const saveVersionAction = ref(false);
const drawerRight = ref(false);
const filter=ref("");
const model = ref("");

const rootNode = computed(()=>{
  return store.currentFlow?.getRoot();
});
const minPanelWidth=computed(()=>{
  const root = store.currentFlow?.getRoot();
  if(store.currentFlow && root){
    return store.currentFlow?.getColumns(root) * 300 + 'px';
  }else{
    return "300px";
  }
});
const fixedLeftPosition = computed(()=>{
  return drawerLeft.value?"300px":"0px";
});

const addNode = (node: IActionNode, inputPoint: string) => {
  if (drawerRight.value) {
    drawerRight.value = false;
  }
  showAddAction.value = true;
  prevNodeIfo.value.prevNode = node;
  prevNodeIfo.value.inputPoint = inputPoint;
}

const onNodeSelected = (node: IActionNode) => {
  //右パネルが開いている場合、自動閉じる
  if (drawerRight.value && store.activeNode?.id !== node.id) {
    drawerRight.value = false;
  }
  store.setActiveNode(node);
}

const onNodeEdit = (node: IActionNode) => {
  store.setActiveNode(node);
  drawerRight.value = true;
}

const onDeleteNode = (node: IActionNode) => {
  if (!store.currentFlow) return;
  //右パネルが開いている場合、自動閉じる
  if (drawerRight.value && store.activeNode?.id === node.id) {
    drawerRight.value = false;
  }
  store.currentFlow?.removeNode(node);
}

const onDeleteAllNextNodes = (node: IActionNode) => {
  if (!store.currentFlow) return;
  //右パネルが開いている場合、自動閉じる
  if (drawerRight.value) {
    drawerRight.value = false;
  }
  store.currentFlow?.removeAllNext(node.id);
}
const closeDg = (val: any) => {
  console.log("Dialog closed->", val);
  if (val == 'OK' && appDg?.value?.selected?.length > 0) {
    const data = appDg.value.selected[0];
    const actionProps = JSON.parse(data.property);
    const outputPoint = JSON.parse(data.outputPoints);
    const action = new ActionNode(data.name, data.desc, "", outputPoint, actionProps);
    store.currentFlow?.addNode(action, prevNodeIfo.value.prevNode, prevNodeIfo.value.inputPoint);
  }
}
/*
 *フローのデータをコピーする
 */
const onCopyFlow = () => {
  if (navigator.clipboard) {
    const jsonData =JSON.stringify(store.currentFlow) ;
    navigator.clipboard.writeText(jsonData).then(() => {
      console.log('Text successfully copied to clipboard');
    },
      (err) => {
        console.error('Error in copying text: ', err);
      });
  } else {
    console.log('Clipboard API not available');
  }
};
/**
 * デプロイ
 */
const onDeploy = async () => {
  if (store.appInfo === undefined || store.flows?.length === 0) {
    $q.notify({
      type: 'negative',
      caption: "エラー",
      message: `設定されたフローがありません。`
    });
    return;
  }
  try {
    deployLoading.value = true;
    await store.deploy();
    deployLoading.value = false;
    $q.notify({
      type: 'positive',
      caption: "通知",
      message: `デプロイを成功しました。`
    });
  } catch (error) {
    console.error(error);
    deployLoading.value = false;
    $q.notify({
      type: 'negative',
      caption: "エラー",
      message: `デプロイが失敗しました。`
    })
  }
  return;
}

const onSaveActionProps=(props:IActionProperty[])=>{
  if(store.activeNode){
      store.activeNode.actionProps=props;
      $q.notify({
        type: 'positive',
        caption: "通知",
        message: `${store.activeNode?.subTitle}の属性を設定しました。（保存はされていません）`
      });
  }
};

const onSaveVersion = async () => {
  versionInfo.value = {
    id: '1' // TODO
  }
  saveVersionAction.value = true;
  // await onSaveAllFlow();
}

const closeSaveVersionDg = (val: 'OK'|'CANCEL') => {
  if (val == 'OK') {
    console.log(versionInfo.value);
  }
}

const onSaveFlow = async () => {
  const targetFlow = store.selectedFlow;
  if (targetFlow === undefined) {
    $q.notify({
      type: 'negative',
      caption: 'エラー',
      message: `選択中のフローがありません。`
    });
    return;
  }
  try {
    saveLoading.value = true;
    await store.saveFlow(targetFlow);
    saveLoading.value = false;
    $q.notify({
      type: 'positive',
      caption: "通知",
      message: `${targetFlow.getRoot()?.subTitle}のフロー設定を保存しました。`
    });
  } catch (error) {
    console.error(error);
    saveLoading.value = false;
    $q.notify({
      type: 'negative',
      caption: "エラー",
      message: `${targetFlow.getRoot()?.subTitle}のフローの設定の保存が失敗しました。`
    })
  }
}
/**
 * すべてフローの設定を保存する
 */
const onSaveAllFlow= async ()=>{
  try{
    const targetFlows = store.eventTree.findAllFlows();
    if (!targetFlows || targetFlows.length === 0 ) {
      $q.notify({
        type: 'negative',
        caption: 'エラー',
        message: `設定されたフローがありません。`
      });
      return;
    }
    saveLoading.value = true;
    for(const flow of targetFlows ){
      const isNew = flow.id === '';
      if(isNew && flow.actionNodes.length===1){
        continue;
      }
      await store.saveFlow(flow);
    }
    $q.notify({
        type: 'positive',
        caption: "通知",
        message: `すべてのフロー設定を保存しました。`
      });
    saveLoading.value = false;
  }catch (error) {
    console.error(error);
    saveLoading.value = false;
    $q.notify({
      type: 'negative',
      caption: "エラー",
      message: `フローの設定の保存が失敗しました。`
    });
  }
}

const fetchData = async () => {
  initLoading.value = true;
  if (store.appInfo === undefined && route?.params?.id !== undefined) {
    // only for page refreshed
    const app = await fetchAppById(route.params.id as string);
    store.setApp(app);
  };
  await store.loadFlow();
  initLoading.value = false
  drawerLeft.value = true;
}

const fetchAppById = async(id: string) => {
  let result = await api.get('api/apps');
  const app = result.data?.data?.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
  if (app) {
    return convertManagedAppToAppInfo(app);
  }

  result = await api.get(`api/v1/app?app=${id}`);
  const kApp = result?.data as IAppDisplay | KErrorMsg;
  if (isErrorMsg(kApp)) {
    $q.notify({
      type: 'negative',
      caption: 'エラー',
      message: kApp.message,
    });
  }
  return kApp;
}

type KErrorMsg = {
  message: string;
}

const isErrorMsg = (e: IAppDisplay | KErrorMsg): e is KErrorMsg => {
  return 'message' in e;
};

const convertManagedAppToAppInfo = (app: IManagedApp): AppInfo => {
  return {
    appId: app.appid,
    name: app.appname
  }
};

const onClearFilter=()=>{
  filter.value='';
}

onMounted(() => {
  authStore.setLeftMenu(false);
  fetchData();
});
</script>

<style lang="scss">
.flowchart {
  padding-top: 10px;
}

.flow-toolbar {
  opacity: 50%;
}

.event-tree .q-drawer {
  top: 50px;
  z-index: 999;
}
.expand{
  position: fixed;
  left: 0px;
  top: 50%;
  z-index: 9999;
}
</style>
