define([
    'require'
    , 'jquery'
    , 'nbextensions/visualpython/src/common/vpCommon'
    , 'nbextensions/visualpython/src/common/constant'
    , 'nbextensions/visualpython/src/common/StringBuilder'
    , 'nbextensions/visualpython/src/common/vpFuncJS'
    , 'nbextensions/visualpython/src/container/vpContainer'
    , 'nbextensions/visualpython/src/pandas/common/pandasGenerator'
    , 'nbextensions/visualpython/src/common/component/vpSuggestInputText'
], function (requirejs, $, vpCommon, vpConst, sb, vpFuncJS, vpContainer, pdGen, vpSuggestInputText) {
    // 옵션 속성
    const funcOptProp = {
        stepCount : 1
        , funcName : "Import Matplotlib"
        , funcID : "mp_importMatplotlib"  // TODO: ID 규칙 생성 필요
    }

    /**
     * html load 콜백. 고유 id 생성하여 부과하며 js 객체 클래스 생성하여 컨테이너로 전달
     * @param {function} callback 호출자(컨테이너) 의 콜백함수
     */
    var optionLoadCallback = function(callback, meta) {
        // document.getElementsByTagName("head")[0].appendChild(link);
        // 컨테이너에서 전달된 callback 함수가 존재하면 실행.
        if (typeof(callback) === 'function') {
            var uuid = vpCommon.getUUID();
            // 최대 10회 중복되지 않도록 체크
            for (var idx = 0; idx < 10; idx++) {
                // 이미 사용중인 uuid 인 경우 다시 생성
                if ($(vpConst.VP_CONTAINER_ID).find("." + uuid).length > 0) {
                    uuid = vpCommon.getUUID();
                }
            }
            $(vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.OPTION_GREEN_ROOM))).find(vpCommon.formatString(".{0}", vpConst.API_OPTION_PAGE)).addClass(uuid);

            // 옵션 객체 생성
            var mpPackage = new MatplotPackage(uuid);
            mpPackage.metadata = meta;

            // 옵션 속성 할당.
            mpPackage.setOptionProp(funcOptProp);
            // html 설정.
            mpPackage.initHtml();
            callback(mpPackage);  // 공통 객체를 callback 인자로 전달
        }
    }
    
    /**
     * html 로드. 
     * @param {function} callback 호출자(컨테이너) 의 콜백함수
     */
    var initOption = function(callback, meta) {
        vpCommon.loadHtml(vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.OPTION_GREEN_ROOM)), "pandas/common/commonEmptyPage.html", optionLoadCallback, callback, meta);
    }

    /**
     * 본 옵션 처리 위한 클래스
     * @param {String} uuid 고유 id
     */
    var MatplotPackage = function(uuid) {
        this.uuid = uuid;           // Load html 영역의 uuid.
        this.package = {
            code: [
                'import matplotlib.pyplot as ${i0}'
                , '%matplotlib ${magic}'
            ],
            input: [
                {
                    name: 'i0',
                    label: 'Matplotlib.pyplot as',
                    type: 'int',
                    value: 'plt'
                },
                { name: 'magic' },
                { name: 'range' },
                { name: 'stylesheet' },
                { name: 'fontfamily' },
                { name: 'fontsize' }
            ]
        }
    }

    /**
     * vpFuncJS 에서 상속
     */
    MatplotPackage.prototype = Object.create(vpFuncJS.VpFuncJS.prototype);

    /**
     * 유효성 검사
     * @returns 유효성 검사 결과. 적합시 true
     */
    MatplotPackage.prototype.optionValidation = function() {
        return true;

        // 부모 클래스 유효성 검사 호출.
        // vpFuncJS.VpFuncJS.prototype.optionValidation.apply(this);
    }


    /**
     * html 내부 binding 처리
     */
    MatplotPackage.prototype.initHtml = function() {
        var that = this;

        this.loadCss(Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "pandas/commonPandas.css");
        this.showFunctionTitle();

        // this.bindOptions();

        var sbPageContent = new sb.StringBuilder();
        var sbTagString = new sb.StringBuilder();

        // TODO: 필수 옵션 테이블 레이아웃
        var tblLayoutRequire = this.createVERSimpleLayout("30%");

        // 1. import matplotlib.pyplot as plt
        sbTagString.clear();
        sbTagString.appendFormatLine("<input type='text' class='vp-input' value='{0}' readonly/>", "plt");
        tblLayoutRequire.addReqRow("Matplotlib.pyplot as", sbTagString.toString());

        // FIXME: vpTableLayoutVerticalSimple에 addDivider 추가 가능한지 확인
        tblLayoutRequire.addRow("", "<hr style='margin: 0px;'/>");

        // 2. %matplotlib inline/notebook
        sbTagString.clear();
        sbTagString.appendFormatLine("<option value='{0}'>{1}</option>", "inline", "inline");
        sbTagString.appendFormatLine("<option value='{0}'>{1}</option>", "notebook", "notebook");
        var tempOptionTag = sbTagString.toString();

        sbTagString.clear();
        sbTagString.appendFormat('<select id="{0}" class="vp-select">{1}</select>', "magic", tempOptionTag);
        tblLayoutRequire.addReqRow("%matplotlib", sbTagString.toString());

        // FIXME: vpTableLayoutVerticalSimple에 addDivider 추가 가능한지 확인
        tblLayoutRequire.addRow("", "<hr style='margin: 0px;'/>"); 

        // 3. plt.style.use('style')
        sbTagString.clear();
        sbTagString.appendFormatLine("<option value='{0}'>{1}</option>", "all", "all");
        sbTagString.appendFormatLine("<option value='{0}'>{1}</option>", "part", "part");
        tempOptionTag = sbTagString.toString();

        sbTagString.clear();
        sbTagString.appendFormat('<select id="{0}" class="vp-select">{1}</select>', "range", tempOptionTag);
        tblLayoutRequire.addRow("Style Range", sbTagString.toString());

        sbTagString.clear();
        sbTagString.appendFormat('<input type="text" id="{0}" class="vp-input"/>', "stylesheet");
        tblLayoutRequire.addRow("Style Sheet", sbTagString.toString());

        // FIXME: vpTableLayoutVerticalSimple에 addDivider 추가 가능한지 확인
        tblLayoutRequire.addRow("", "<hr style='margin: 0px;'/>"); 

        // 4. rcParams
        // #from matplotlib.pylab import rcParams
        // #rcParams['font.family'] = 'Gulim'
        // #rcParams['font.size'] = 10
        // #rcParams['figure.figsize'] = 12, 8
        // #rcParams['axes.grid'] = True
        sbTagString.clear();
        sbTagString.appendFormat('<input type="text" id="{0}" class="vp-input" value="{1}"/>', "fontfamily", "'Gulim'");
        tblLayoutRequire.addRow("System Font", sbTagString.toString());

        sbTagString.clear();
        sbTagString.appendFormat('<input type="number" id="{0}" class="vp-input" value="10"/>', "fontsize");
        tblLayoutRequire.addRow("Font Size", sbTagString.toString());


        // 필수 옵션 영역 (아코디언 박스)
        var accBoxRequire = this.createOptionContainer(vpConst.API_REQUIRE_OPTION_BOX_CAPTION);
        accBoxRequire.setOpenBox(true);
        accBoxRequire.appendContent(tblLayoutRequire.toTagString());

        sbPageContent.appendLine(accBoxRequire.toTagString());

        // 페이지에 컨트롤 삽입 vpFuncJS 에서 제공
        $(this.wrapSelector()).append(sbPageContent.toString());
        
        // 이벤트 처리
        // e1. stylesheet autocomplete with SuggestInput
        this.bindStylesheet();

        // e2. system font autocomplete with SuggestInput
        this.bindSystemfont();

    }

    /**
     * 선택한 패키지명 입력
     */
    MatplotPackage.prototype.showFunctionTitle = function() {
        $(this.wrapSelector('.vp-funcNavi')).html(
            `
            <span class="vp-multilang" data-caption-id="funcNavi"> Matplotlib &gt; <strong><span data-caption-id="vp_functionName" class="vp_functionName">Import Matplotlib</span></strong></span>
            `
        )
        // $(this.wrapSelector('.vp_functionName')).text('Import Matplotlib');
    }

    /**
     * get metadata
     * @param {String} id id
     */
    MatplotPackage.prototype.getMetadata = function(id) {
        if (this.metadata == undefined)
            return "";
        var len = this.metadata.options.length;
        for (var i = 0; i < len; i++) {
            var obj = this.metadata.options[i];
            if (obj.id == id)
                return obj.value;
        }
        return "";
    }

    /**
     * stylesheet autocomplete
     */
    MatplotPackage.prototype.bindStylesheet = function() {
        var that = this;

        // 사용가능한 스타일 시트 조회
        var stylesheetTag = $(this.wrapSelector('#stylesheet'));
        // 스타일 시트 조회 코드
        var code = new sb.StringBuilder();
        code.appendLine('import matplotlib.pyplot as plt');
        code.appendLine('import json');
        // code.append(`print(json.dumps(plt.style.available))`);
        code.append(`print(json.dumps([{ 'label': s, 'value': "'"+s+"'" } for s in plt.style.available]))`);
        this.kernelExecute(code.toString(), function(result) {
            // 사용가능한 스타일 시트 목록
            var varList = JSON.parse(result);
            var suggestInput = new vpSuggestInputText.vpSuggestInputText();
            suggestInput.setComponentID('stylesheet');
            suggestInput.addClass('vp-input');
            // metadata check
            var mdvalue = that.getMetadata('stylesheet');
            if (mdvalue != undefined && mdvalue != '') {
                suggestInput.setValue(mdvalue);
            }
            suggestInput.setSuggestList(function() { return varList; });
            // suggestInput.setNormalFilter(false);
            $(stylesheetTag).replaceWith(function() {
                return suggestInput.toTagString();
            });
        });
    };

    /**
     * font family autocomplete
     */
    MatplotPackage.prototype.bindSystemfont = function() {
        var that = this;

        // 사용가능한 폰트 목록 조회
        var fontFamilyTag = $(this.wrapSelector('#fontfamily'));
        // 폰트 조회 코드
        var code = new sb.StringBuilder();
        code.appendLine('import json');
        code.appendLine("import matplotlib.font_manager as fm");
        code.appendLine("_ttflist = fm.fontManager.ttflist");
        code.append(`print(json.dumps([{"label": f.name, "value":("'" + f.name + "'")} for f in _ttflist]))`);
        this.kernelExecute(code.toString(), function(result) {
            // 사용가능한 폰트 목록
            var varList = JSON.parse(result);
            var suggestInput = new vpSuggestInputText.vpSuggestInputText();
            suggestInput.setComponentID('fontfamily');
            suggestInput.addClass('vp-input');
            // metadata check
            var mdvalue = that.getMetadata('fontfamily');
            if (mdvalue != undefined && mdvalue != '') {
                suggestInput.setValue(mdvalue);
            } else {
                suggestInput.setValue("'Gulim'");
            }
            suggestInput.setSuggestList(function() { return varList; });
            // suggestInput.setNormalFilter(false);
            $(fontFamilyTag).replaceWith(function() {
                return suggestInput.toTagString();
            });
        });
    };

    /**
     * 코드 생성
     * @param {boolean} exec 실행여부
     */
    MatplotPackage.prototype.generateCode = function(addCell, exec) {

        try {
            var sbCode = new sb.StringBuilder();

            // 코드 생성
            // 필수 입력 항목
            sbCode.appendFormatLine('import matplotlib.pyplot as {0}', $(this.wrapSelector('#i0')).val());
            sbCode.appendFormatLine('%matplotlib {0}', $(this.wrapSelector('#magic')).val());

            // style range, sheet
            var stylerange = $(this.wrapSelector('#range')).val();
            var stylesheet = $(this.wrapSelector('#stylesheet')).val();
            if (stylesheet != '') {
                if (stylerange == 'all') {
                    // 전체 범위 코드 구성
                    sbCode.appendFormat("plt.style.use('{0}')", stylesheet);    
                } else {
                    // 일부 범위 코드 구성
                    sbCode.appendFormatLine("with plt.style.context({0}):", stylesheet);
                    sbCode.append("    pass");
                }
            }

            // font family, size
            var fontfamily = $(this.wrapSelector('#fontfamily')).val();
            var fontsize = $(this.wrapSelector('#fontsize')).val();
            sbCode.appendLine('');
            sbCode.appendLine("from matplotlib.pylab import rcParams");
            if (fontfamily != '') {
                sbCode.appendFormatLine("rcParams['font.family'] = {0}", fontfamily);
            }
            if (fontsize != '') {
                sbCode.appendFormatLine("rcParams['font.size'] = {0}", fontsize);
            }
            sbCode.appendLine("#rcParams['figure.figsize'] = 12, 8");
            sbCode.appendLine("#rcParams['axes.grid'] = True");

            // 코드 추가 및 실행
            if (addCell) this.cellExecute(sbCode.toString(), exec);
        } catch (exmsg) {
            // 에러 표시
            vpCommon.renderAlertModal(exmsg);
            return "BREAK_RUN"; // 코드 생성 중 오류 발생
        }

        return sbCode.toString();
    }

    return {
        initOption: initOption
    };
});