// ------------ Data Define ---------------- //
// Todo: 엔티티 NLP와 연동 값 가져와서 세팅 필요 key 인텐트 명 value seq
const defIntent = [
//    { key: "== 인텐트 선택 ==", value: -1 },
]

const defBargeIn = [
    { display: "BargeIn: ON", value: "Y" },
    { display: "BargeIn: OFF", value: "N" }
]

const defAnswerType = [
    { display: "STT", value: "STT" },
//    { display: "DTMF", value: "DTMF" },
    { display: "MEMO", value: "MEMO" }
]

// 화면 불려오면서 SystemEntitiy를 불러와서 화면에서 사용
const defEntityType = [
    { display: "발화문", value: "none" },
]

const defCallProcess = [
    { display: "== 콜처리 선택 ==", value: "none"},
    { display: "콜종료", value: "END"},
    { display: "호전환", value: "TRANSFER"},
]

let apiNodeList = []

let commonNodeList = []

let functionParamList = {"0": ""}

// ------------ node item 정의 ---------------- //
const formItemNodeCode = {
    colSpan: 20,
    dataField: "nodeCode",
    label: {
        text:"노드 코드"
    },
    validationRules: [{
        type: 'required',
        message: '인텐트명은 필수값입니다.',
    }],
    editorType: "dxTextBox",
    cssClass: "ipt_box",
    editorOptions: { readOnly : true },
}

const formItemNodeName = {
    colSpan: 20,
    dataField: "nodeName",
    label: {
        text:"노드명"
    },
    editorOptions: {
        placeholder: "노드명을 입력하세요",
    },
    editorType: "dxTextBox",
    cssClass: "ipt_box",
}

const formItemMent = {
    colSpan: 20,
    dataField: "nodeMent",
    label: {
        text: "멘트",
    },
    editorOptions: {
        placeholder: "멘트를 입력하세요",
        height: 110,
    },
    editorType: "dxTextArea",
}

const formItemMent2 = {
    colSpan: 20,
    dataField: "nodeMent",
    label: {
        text: "멘트",
    },
    editorOptions: {
        placeholder: "멘트를 입력하세요",
        // width: 280,
        height: 110,
    },
    editorType: "dxTextArea",
}

// nodeMent 필수값 전용
const formItemMent2required = {
    colSpan: 20,
    dataField: "nodeMent",
    label: {
        text: "멘트",
    },
    editorOptions: {
        placeholder: "멘트를 입력하세요",
        // width: 280,
        height: 110,
    },
    validationRules: [{
        type: 'required',
        message: '멘트는 필수값입니다.',
    }],
    editorType: "dxTextArea",
}

const formItemMent2BargeIn = {
    colSpan: 20,
    dataField: "bargeIn",
    label: {
        // text: "Barge In",    // 히든 옵션 안먹음
        text: " ",
        labelMode: 'hidden',
    },

    editorOptions: {
        dataSource: defBargeIn,
        displayExpr: "display",
        valueExpr: "value",
        // Todo: 기본값 설정에 대한 개발이 필요함
        // value: defBargeIn[0].value, // 팝업을 열때마다 설정됨.. 기본값 설정 x
        // onValueChanged(data) {
        //     console.log(data.value);
        // },
    },
    editorType: "dxSelectBox",
    cssClass: "sel_box",
}

const formItemReMent = {
    colSpan: 20,
    dataField: "reNodeMent",
    label: {
        text: "재질의멘트"
    },
    editorOptions: {
        placeholder: "멘트를 입력하세요",
        height: 110,
    },
    editorType: "dxTextArea",
    // elementAttr : {
    //     style: "margin: 0px, 0px, 0px, 0px, padding-top: 0px, height: 10"
    // },
}

const formItemReMentBargeIn = {
    colSpan: 20,
    dataField: "reBargeIn",
    label: {
        // text: "Barge In2",    // 히든 옵션 안먹음
        text: " ",
        labelMode: 'hidden',
    },

    editorOptions: {
        dataSource: defBargeIn,
        displayExpr: "display",
        valueExpr: "value",
        // Todo: 기본값 설정에 대한 개발이 필요함
        // value: defBargeIn[0].value, // 팝업을 열때마다 설정됨.. 기본값 설정 x
        // onValueChanged(data) {
        //     console.log(data.value);
        // },
    },
    editorType: "dxSelectBox",
    cssClass: "sel_box",
}

const formItemReMentCnt = { // Todo: 숫자만 입력 받도록 수정 필요
    colSpan: 10,
    dataField: "nodeQstCnt",
    label: {
        text: "질의횟수"
    },
    editorOptions: {
        placeholder: "재질의 횟수를 입력하세요",
    },
    editorType: "dxNumberBox",
    cssClass: "ipt_box",
}

const formItemRequiredYn = {
    colSpan: 10,
    dataField: "requiredYn",
    label: {
        text: "필수질문",
    },
    value: false,
    editorType: "dxCheckBox",
    cssClass: "chk_box",
}


const formItemIntent = {
    colSpan: 20,
    dataField: "intentSeq",
    label: {
        text: "인텐트 명",
    },
    editorOptions: {
        dataSource: defIntent,
        displayExpr: "display",
        valueExpr: "value",
        searchEnabled: true,
    },
    validationRules: [{
        type: 'required',
        message: '인텐트명은 필수값입니다.',
    }],
    editorType: "dxSelectBox",
    cssClass: "sel_box",
}

const formItemScenarioEndFlag = {
    colSpan: 20,
    dataField: "endFlag",
    label: {
        text: "시나리오 완료",
    },
    value: false,
    editorType: "dxCheckBox",
    cssClass: "chk_box",
}

const formItemParameterId = {
    colSpan: 20,
    dataField: "paramName",
    label: {
        text:"파라메터ID",
    },
    editorOptions: {
        placeholder: "파라메터ID를 입력해 주세요",
        inputAttr: {
            class: "paramArea"
        }
    },
    validationRules: [{
        type: 'required',
        message: '파라메터ID는 필수값입니다.',
    }],
    editorType: "dxTextBox",
    cssClass: "ipt_box",
}

const formItemAnswerType = {
    colSpan: 10,
    dataField: "actionType",
        label: {
        text: "답변타입",
    },
    editorOptions: {
        dataSource: defAnswerType,
        displayExpr: "display",
        valueExpr: "value",
        // Todo: 값 변경에 따른 컨트럴 수정 기능 필요
        onValueChanged(data) {
            if (data.value != "DTMF") { // DTMF가 아니면
                form.itemOption("answer.gidits", "visible", false);
                form.itemOption("answer.entityType", "visible", true);
                // form.itemOption("answer.itemEntityType", "visible", false);
            } else {
                form.itemOption("answer.gidits", "visible", true);
                form.itemOption("answer.entityType", "visible", false);
                // form.itemOption("answer.itemEntityType", "visible", true);
            }
        },
    },
    editorType: "dxSelectBox",
    cssClass: "sel_box",
}

const formItemEntityType = {
    colSpan: 10,
    dataField: "entityType",
    label: {
        text: "엔티티타입",
    },
    editorOptions: {
        dataSource: defEntityType,
        displayExpr: "display",
        valueExpr: "value",
        searchEnabled: true,
    },
    validationRules: [{
        type: 'required',
        message: '엔티티타입은 필수값입니다.',
    }],
    name: "entityType",
    editorType: "dxSelectBox",
    cssClass: "sel_box line",
}

// 현재 사용하지 않음
// const formItemMaxAnswerTime = { // Todo: 숫자 값만 입력 받도록 수정 필요
//     colSpan: 20,
//     dataField: "maxAnswerTime",
//     label: {
//         text: "최대답변시간(초)"
//     },
//     editorOptions: {
//         placeholder: "초단위로 입력하세요",
//         width: 170,
//     },
//     // editorType: "dxTextBox",
//     cssClass: "ipt_box",
// }

// 현재 사용하지 않음
// const formItemDtmfLastInput = { // Todo: 숫자, #, * 값만 입력
//     colSpan: 20,
//     dataField: "dtmfLastInput",
//     label: {
//         text: "마지막입력"
//     },
//     editorOptions: {
//         placeholder: "마지막으로 입력 받을 값을 입력 하세요.",
//     },
//     // editorType: "dxTextBox",
//     cssClass: "ipt_box",
// }

const formItemDtmfDigits = { // Todo: 숫자 값만 입력 받도록 수정 필요
    colSpan: 10,
    dataField: "maxDigit",
    label: {
        text: "최대길이"
    },
    editorOptions: {
        placeholder: "DTMF 자리수를 입력하세요",
        inputAttr: {
            class: "maxdigit",
        }
    },
    name: "gidits",
    visible: false,
    showSpinButtons: true,
    editorType: "dxNumberBox",
    cssClass: "ipt_box",
}

const formItemTimeoutSec = { // Todo: 숫자 값만 입력 받도록 수정 필요
    colSpan: 10,
    dataField: "timeoutSec",
    label: {
        text: "Timeout(초)",
    },
    editorOptions: {
        placeholder: "고객 답변 Timeout 시간을 입력하세요",
    },
    editorType: "dxNumberBox",
    cssClass: "ipt_box",
}

const formItemNextNode = {
    colSpan: 6,
    dataField: "nextNode",
    label: {
        text: "코드"
    },
    editorOptions: {
        readOnly: true,
    },
    editorType: "dxTextBox",
    cssClass: "ipt_box",
}

const formItemNextNodeName = {
    colSpan: 14,
    dataField: "nextNodeName",
    label: {
        text: "다음노드명"
    },
    editorOptions: {
        readOnly: true,
    },
    editorType: "dxTextBox",
    cssClass: "ipt_box",
}

const formItemSplitNextCondition = {
    colSpan: 20,
    dataField: "condition",
    label: {
        text: "조건",
    },
    editorOptions: {
        placeholder: "조건 입력하세요",
    },
    validationRules: [{
        type: 'required',
        message: '조건은 필수값입니다.',
    }],
    editorType: "dxTextBox",
    cssClass: "ipt_box",
}

const formItemApi = {
    colSpan: 20,
    dataField: "apiNodeSeq",
    label: {
        text : "API 노드"
    },
    editorOptions: {
        dataSource: apiNodeList,
        displayExpr: "display",
        valueExpr: "value",
        searchEnabled: true,
        onValueChanged(data) {
            ViewEvent.apiNodeValueChanged(data.value, true);
            // ViewEvent.createScrollBar(data);
        },
    },
    validationRules: [{
        type: 'required',
        message: 'API 노드는 필수값입니다.',
    }],
    editorType: "dxSelectBox",
    cssClass: "sel_box line",
}

const formItemApiRequest = {
    colSpan: 20,
    dataField: "reqParamName",
    editorOptions: {
        placeholder: "value",
        text : ""
    },
    editorType: "dxTextBox",
    cssClass: "ipt_box",
}

const formItemApiResponse = {
    colSpan: 20,
    dataField: "resParamName",
    editorOptions: {
        placeholder: "value",
        text : ""
    },
    editorType: "dxTextBox",
    cssClass: "ipt_box",
}

const formItemCommonNode = {
    colSpan: 20,
    dataField: "commonNodeSeq",
    label: {
        text : "Common 노드",
    },
    validationRules: [{
        type: 'required',
        message: 'Common 노드는 필수값입니다.',
    }],
    editorOptions: {
        dataSource: commonNodeList,
        displayExpr: "display",
        valueExpr: "value",
        searchEnabled: true,
        onValueChanged(data) {
            ViewEvent.cmmNodeValueChanged(data.value);
        },
    },
    editorType: "dxSelectBox",
    cssClass: "sel_box line",
}

const formItemFunctionParameter = {
    colspan: 10,
    itemType: 'group',
    name: 'parameter',
}

const formItemFunctionParameterButton = {
    itemType: 'button',
    horizontalAlignment: 'left',
    buttonOptions: {
        icon: 'add',
        text: 'Add',
    },
}

const formItemFunctionJavaScript = {
    colSpan: 20
    , dataField: "javaScript"
    , editorType: "dxTextArea"
    , editorOptions: {
        placeholder: "Javascript ECMAScript 5.1 문법을 지원합니다.",
        height: 200,
        maxLength: 8000,
        inputAttr: {
            class: "jsArea"
        }
    },
}

const formItemCallProcess = {
    colSpan: 20,
    dataField: "callProcess",
    label: {
        text: "콜처리",
    },
    editorOptions: {
        dataSource: defCallProcess,
        displayExpr: "display",
        valueExpr: "value",
    },
    validationRules: [{
        type: 'required',
        message: '콜처리는 필수값입니다.',
    }],
    editorType: "dxSelectBox",
    cssClass: "sel_box",
}

const formItemShopPhoneNumber = {
    colSpan: 20,
    dataField: "shopPhoneNumber",
    label: {
        text: "매장번호",
    },
    editorOptions: {
        placeholder: "매장번호를 입력하세요",
    },
    // editorType: "dxTextBox",
    cssClass: "ipt_box",
}




// ------------ node group 정의 ------------- //
// 노드 공통 부분 그룹 ( nodeCode, nodeName )
const formGroupCommon = {
    itemType: "group",
    cssClass: "grouping",
    colSpan: 20,
    colCount: 20,
    items: [formItemNodeCode, formItemNodeName],
}

// 슬롯 답변 타입 그룹 정의 - 현재 사용하지 않음
// const formGroupAnswerSTT = {
//     itemType: 'group',
//     colSpan: 20,
//     colCount: 20,
//     name: 'answerSTT',
//     items: [formItemMaxAnswerTime],
// }

// const formGroupAnswerDTMF = {
//     itemType: 'group',
//     colSpan: 20,
//     colCount: 20,
//     name: 'answerDTMF',
//     visible: false, // 초기 진입시 STT 항목을 보여줘야됨
//     items: [formItemDtmfDigits],
// }

const formGroupAnswer = {
    itemType: 'group',
    colSpan: 20,
    colCount: 20,
    caption: '답변 설정',
    name: 'answer',
    // items: [formItemAnswerType, formItemEntityType, formGroupAnswerSTT, formGroupAnswerDTMF],
    items: [formItemAnswerType, formItemEntityType, formItemDtmfDigits],
}

const formGroupSplitNextNode = {
    itemType: 'group',
    cssClass: "grouping",
    colSpan: 20,
    colCount: 20,
    name: 'split',
    items: [formItemNextNodeName, formItemNextNode, formItemSplitNextCondition, formItemMent],
}

// API Request, Response 그룹 정의
const formGroupApiRequest = {
    itemType: 'group',
    cssClass: "grouping",
    colSpan: 20,
    colCount: 20,
    caption: "Request Parameter",
    name: "apiRequestParam",
    // items: [formItemApiRequest],
    items: [],
}

const formGroupApiResponse = {
    itemType: 'group',
    cssClass: "grouping",
    colSpan: 20,
    colCount: 20,
    caption: "Response Parameter",
    name: "apiResponseParam",
    items: [],
}

// Function node 파라미터 그룹 정의
const formGroupFunctionParameter = {
    itemType: 'group',
    cssClass: "grouping",
    colSpan: 20,
    caption: 'Function Parameter',
    name: 'function',
    items: [formItemFunctionParameter, formItemFunctionParameterButton],
}

// Common node 파라미터 그룹 정의
const formGroupCommonParameter = {
    itemType: 'group',
    cssClass: "grouping",
    colSpan: 20,
    colCount: 20,
    caption: "공통 노드 변수",
    name: "commonNodeParam",
    items: [],
}

// ------------ node control 조합 ------------- //
const formIntent = {
    itemType: "group",
    cssClass: "contentView",
    colCount: 20,
    items: [formGroupCommon, formItemMent, formItemIntent],
}

const formSpeak = {
    itemType: "group",
    cssClass: "contentView",
    colCount: 20,
    items: [formGroupCommon, formItemMent2required, formItemMent2BargeIn, formItemScenarioEndFlag ],
}

const formSlot = {
    itemType: "group",
    cssClass: "contentView",
    colCount: 20,
    items: [formGroupCommon, formItemParameterId, formItemMent2required, formItemMent2BargeIn, formItemReMent, formItemReMentBargeIn,
        formItemReMentCnt, formItemRequiredYn, formGroupAnswer ],
}

const formApi = {
    itemType: "group",
    cssClass: "contentView",
    colCount: 20,
    items: [formGroupCommon, formItemApi]
}

const formSplit = {
    itemType: "group",
    cssClass: "contentView",
    colCount: 20,
    items: [formGroupCommon],

}

const formCommon = {
    itemType: "group",
    cssClass: "contentView",
    colCount: 20,
    items: [formGroupCommon, formItemCommonNode],
}

const formFunction = {
    itemType: "group",
    cssClass: "contentView",
    colCount: 20,
    items: [formGroupCommon],
}

const formCall = {
    itemType: "group",
    cssClass: "contentView",
    colCount: 20,
    items: [formGroupCommon, formItemMent2required, formItemMent2BargeIn, formItemCallProcess, formItemShopPhoneNumber],
}
