<template>
  <div v-bind="$attrs">
    <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label>
      <template v-slot:control>
        <q-card flat class="full-width">
          <q-card-actions vertical>
            <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted ? '設定済み' : '未設定' }}</q-btn>
          </q-card-actions>
          <q-card-section class="text-caption">
            <div v-if="!isSetted">{{ placeholder }}</div>
            <div v-else>{{ conditionString }}</div>
          </q-card-section>
        </q-card>
      </template>
    </q-field>
    <condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
  </div>
</template>



<script lang="ts">
import { ConditionNode, ConditionTree, Operator } from 'app/src/types/Conditions';
import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';

type Props = {
  props?: {
    name: string;
    modelValue?: {
      fields: {
        type: string;
        label: string;
        code: string;
      }[]
    }
  }
};


export default defineComponent({
  name: 'FieldInput',
  inheritAttrs: false,
  components: {
    ConditionEditor
  },
  props: {
    context: {
      type: Array<Props>,
      default: '',
    },
    displayName: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    hint: {
      type: String,
      default: '',
    },
    modelValue: {
      type: String,
      default: null
    },
    sourceType: {
      type: String,
      default: 'field'
    }
  },

  setup(props, { emit }) {
    const source = props.context.find(element => element?.props?.name === 'sources')
    
    if (source) {
      if(props.sourceType === 'field'){
        provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
      } else if(props.sourceType === 'app'){
        console.log('sourceApp', source.props?.modelValue);
        provide('sourceApp', computed( () => source.props?.modelValue?.app?.id));
      }
    }

    const appDg = ref();
    const show = ref(false);
    const tree = reactive(new ConditionTree());
    if (props.modelValue && props.modelValue !== '') {
      tree.fromJson(props.modelValue);
    } else {
      const newNode = new ConditionNode({}, Operator.Equal, '', tree.root);
      tree.addNode(tree.root, newNode);
    }

    const isSetted = ref(props.modelValue && props.modelValue !== '');

    const conditionString = computed(() => {
      return tree.buildConditionString(tree.root);
    });

    const showDg = () => {
      show.value = true;
    };

    const onClosed = (val: string) => {
      if (val == 'OK') {
        const conditionJson = tree.toJson();
        isSetted.value = true;
        emit('update:modelValue', conditionJson);
      }
    };

    watchEffect(() => {
      const conditionJson = tree.toJson();
      emit('update:modelValue', conditionJson);
    });

    return {
      appDg,
      isSetted,
      show,
      showDg,
      onClosed,
      tree,
      conditionString
    };
  }
});
</script>
