require.config({paths: {'vs': '/plugins/vs'}});


class APITester {

    constructor() {
        this.servers = [];
        this.apiTabTitleTarget = '#apiRequestTabTitle';
        this.apiTabContentTarget = '#apiRequestTabContent';
        this.collectionTarget = '#side_menubar';
        this.currentIndex = 0;
        this.apiRequests = [];  //탭 열린 API
        this.collections = [];  //API 컬렉션
        this.requestEditors = [];  //API request body editor
        this.responseEditors = []; //API response body editor
        this.consoleEditors = []; //API console editor
        this.preRequestEditors = [];
        this.postRequestEditors = [];

        this.apiClient = new APIClient();
    }

    renderServers(selectedServer) {
        const optionsHtml = this.servers.map(server => `
            <option value="${server.id}" ${selectedServer === server.id ? 'selected' : ''}  data-path="${server.basePath}">${server.name}</option>
        `).join('');

        return `<select class="form-select server" name="server" required>
                <option value="">서버 선택</option>
                ${optionsHtml}</select>`;
    }

    basePath(serverId) {
        if (serverId === undefined || serverId === null) {
            return this.servers[0].basePath;
        }
        return this.servers.filter(server => server.id == serverId)[0].basePath; // == : 타입 비교 없이 값만 비교
    }

    apiRequestTemplate(apiRequest, index) {
        return `
        <div class="tab-pane fade mt-1 api_request" id="api_request_${apiRequest.id}">
            <div><span class="collection_name">${apiRequest.collectionName}</span> &gt; <span class="api_name">${apiRequest.name}</span></div>
            <div class="d-flex align-items-center api_request_info">
                <div class="form-floating col-md-1 me-1">
                    <select name="method" class="form-select method">
                        <option value="POST"    ${apiRequest.method === 'POST' ? 'selected' : ''}>POST</option>
                        <option value="GET"     ${apiRequest.method === 'GET' ? 'selected' : ''}>GET</option>
                        <option value="PUT"     ${apiRequest.method === 'PUT' ? 'selected' : ''}>PUT</option>
                        <option value="DELETE"  ${apiRequest.method === 'DELETE' ? 'selected' : ''}>DELETE</option>
                        <option value="CONNECT" ${apiRequest.method === 'CONNECT' ? 'selected' : ''}>CONNECT</option>
                        <option value="HEAD"    ${apiRequest.method === 'HEAD' ? 'selected' : ''}>HEAD</option>
                        <option value="OPTIONS" ${apiRequest.method === 'OPTIONS' ? 'selected' : ''}>OPTIONS</option>
                        <option value="TRACE"   ${apiRequest.method === 'TRACE' ? 'selected' : ''}>TRACE</option>
                        <option value="PATCH"   ${apiRequest.method === 'PATCH' ? 'selected' : ''}>PATCH</option>
                    </select>
                    <label class="form-label must">Method</label>
                </div>
                <div class="form-floating col-md-2 me-1">
                    ${this.renderServers(apiRequest.server)}
                    <label class="form-label must">Server</label>
                </div>
                <div class="form-floating col-md-2 me-1">
                    <div class="form-floating col-md">
                        <input type="text" name="basePath" class="form-control" value="${this.basePath(apiRequest.server)}" readonly>
                        <label class="must">기본 경로</label>
                    </div>
                </div>
                <div class="input-group col-md me-1">
                    <div class="form-floating col-md">
                        <input type="text" name="path" class="form-control path" value="${apiRequest.path}" placeholder="호출할 경로 (/부터 입력)">
                        <label class="must">Path</label>
                    </div>
                    <button class="btn btn-primary send">Send</button>
                </div>
                <button class="btn btn-primary save" data-index="${index}" style="height: 58px;">저장</button>
            </div>
            <ul class="nav nav-tabs mt-1" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
                            type="button" role="tab" aria-controls="requestBody" data-bs-target="#requestBodyTab_${apiRequest.id}"
                            aria-selected="false">Body
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link btn_request_param_tab" data-bs-toggle="tab" 
                            type="button" role="tab" aria-controls="paramTab" data-bs-target="#requestParamTab_${apiRequest.id}"
                            aria-selected="true">Param
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link btn_request_header_tab" data-bs-toggle="tab"
                            type="button" role="tab" aria-controls="requestHeader" data-bs-target="#requestHeaderTab_${apiRequest.id}"
                            aria-selected="false">Header
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link btn_prerequest_tab" data-bs-toggle="tab"
                            type="button" role="tab" aria-controls="preScrit" data-bs-target="#preRequestTab_${apiRequest.id}"
                            aria-selected="false">Pre-Request
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link btn_postrequest_tab" data-bs-toggle="tab"
                            type="button" role="tab" aria-controls="postScript" data-bs-target="#postRequestTab_${apiRequest.id}"
                            aria-selected="false">Post-Request
                    </button>
                </li>
            </ul>
            <div class="tab-content border-bottom" style="min-height: 300px;">
                <div class="tab-pane fade show request_param_tab" role="tabpanel" id="requestParamTab_${apiRequest.id}"
                     aria-labelledby="requestParams-tab">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">이름</th>
                            <th>값</th>
                            <th>
                                <button type="button" class="btn btn-secondary btn-sm btn_add_query">추가</button>
                            </th>
                        </tr>
                        </thead>
                        <tbody class="query_params">
                            ${this.renderParams(apiRequest.queryParams)}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade request_header_tab" role="tabpanel" id="requestHeaderTab_${apiRequest.id}"
                     aria-labelledby="requestHeader-tab">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">이름</th>
                            <th scope="col">값</th>
                            <th scope="col">
                                <button type="button" class="btn btn-secondary btn-sm btn_add_header">추가</button>
                            </th>
                        </tr>
                        </thead>
                        <tbody class="request_headers">
                            ${this.renderHeaders(apiRequest.headers)}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade request_body_tab" role="tabpanel" id="requestBodyTab_${apiRequest.id}"
                     aria-labelledby="requestBody-tab">
                    <select class="form-select mt-1 request_body_type" name="request_type">
                        <option value="json">json</option>
                        <option value="xml">xml</option>
                        <option value="text/plain">text/plain</option>
                    </select>
                    <div class="request_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
                </div>
                <div class="tab-pane fade pre_script_tab" role="tabpanel" id="preRequestTab_${apiRequest.id}"
                     aria-labelledby="preScrit-tab">
                    <div class="pre-request mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
                </div>
                <div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
                     aria-labelledby="postScrit-tab">
                    <div class="post-request mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
                </div>
            </div>
            <div class="mt-1">
                <span>Response</span>
                <span class="response_status"></span>
                <span class="response_time"></span>
                <span class="response_size"></span>
            </div>
            <ul class="nav nav-tabs mt-1" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#responseBodyTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseBody" aria-selected="false">Body</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#responseHeaderTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseHeader" aria-selected="false">Header</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#consoleTab_${apiRequest.id}" type="button" role="tab" aria-controls="consoleTab" aria-selected="false">Console</button>
                </li>
            </ul>
            <div class="tab-content border-bottom" style="min-height: 250px;">
                <div class="tab-pane fade show active" id="responseBodyTab_${apiRequest.id}" role="tabpanel"
                     aria-labelledby="responseParams-tab">
                    <div class="response_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
                </div>
                <div class="tab-pane fade" id="responseHeaderTab_${apiRequest.id}" role="tabpanel"
                     aria-labelledby="responseParams-tab">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">이름</th>
                            <th scope="col">값</th>
                        </tr>
                        </thead>
                        <tbody class="response_headers">
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="consoleTab_${apiRequest.id}" role="tabpanel"
                     aria-labelledby="console-tab">
                    <div class="console mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
                </div>
            </div>
        </div>
        `;
    }

    queryParamTemplate(queryParam, index) {
        return `
            <tr data-index="${index}">
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="queryParams[${index}].enabled" ${queryParam.enabled ? 'checked' : ''} />
                    </div>
                </td>
                <td>
                    <input class="form-control" type="text" name="queryParams[${index}].key" value="${queryParam.key}"/>
                </td>
                <td>
                    <input class="form-control" type="text" name="queryParams[${index}].value" value="${queryParam.value}"/>
                </td>
                <td>
                    <button type="button" class="btn btn-secondary btn-sm btn_remove_query">제거</button>
                </td>
            </tr>
        `;
    }

    headerTemplate(header, index) {
        return `
            <tr data-index="${index}">
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="headers[${index}].enabled" ${header.enabled ? 'checked' : ''} />
                    </div>
                </td>
                <td>
                    <input class="form-control" type="text" name="headers[${index}].key" value="${header.key}"/>
                </td>
                <td>
                    <input class="form-control" type="text" name="headers[${index}].value" value="${header.value}"/>
                </td>
                <td>
                    <button type="button" class="btn btn-secondary btn-sm btn_remove_header">제거</button>
                </td>
            </tr>
        `;
    }

    responseHeaderTemplate(key, value) {
        return `
            <tr>
                <td>
                    <input class="form-control" type="text" value="${key}" readonly/>
                </td>
                <td>
                    <input class="form-control" type="text" value="${value}" readonly/>
                </td>
            </tr>
        `;
    }

    collectionTemplate(collection, index) {
        return `
        <li id="collection_${index}" class="collection api_scenario_item" data-index="${index}">
            <div class="d-flex justify-content-between">
                <button class="btn d-inline-flex align-items-center rounded normal"
                        data-bs-toggle="collapse"
                        data-bs-target="#btn_collection_${index}" aria-expanded="false" aria-current="false">${collection.name}
                </button>
                <div class="d-flex justify-content-between">
                    <button class="p-1 reset-button edit_collection" data-collection="${collection.id}"><i class="fa fa-sharp fa-file-edit"></i></button>
                    <button class="p-1 reset-button delete_collection" data-collection="${collection.id}"><i class="fa fa-sharp fa-trash-can"></i></button>
                </div>
            </div>
            <div class="collapse" id="btn_collection_${index}">
                <ul class="list-unstyled fw-normal pb-1 small">
                    ${collection.apis.map((api, apiIndex) => this.collectionApiTemplate(api, apiIndex, collection.id)).join('')}
                </ul>
            </div>
        </li>
        `;
    }

    collectionApiTemplate(api, apiIndex, collectionId) {
        return `
        <li class="d-flex justify-content-between api_request_sortable " draggable="true" data-collection="${collectionId}" data-id="${api.id}" data-index="${apiIndex}" data-node-type="api" data-name="${api.name}">
                <a href="#" class="d-inline-flex align-items-center rounded open_api_request" data-node-type="api">${api.name}</a>
                <div class="d-flex justify-content-between">
                    <button class="p-1 reset-button edit_api_request"><i class="fa fa-sharp fa-file-edit"></i></button>
                    <button class="p-1 reset-button delete_api_request"><i class="fa fa-trash-can"></i></button>
                </div>
            </li>
        `;
    }

    init(servers) {
        if (servers) {
            this.servers = servers;
            if (this.servers.length === 0) {
                $('.toast-body').text('서버관리에서 서버를 등록해주세요.');
                $('.toast').toast('show');
            }
        }
        this.bindEvents();
        this.loadCollections();
    }

    bindEvents() {
        const events = [
            {selector: '.btn_add_header', action: this.addHeader.bind(this)},
            {selector: '.btn_remove_header', action: this.removeHeader.bind(this)},
            {selector: '.btn_add_query', action: this.addQueryParam.bind(this)},
            {selector: '.btn_remove_query', action: this.removeQueryParam.bind(this)},
            {selector: '.send', action: this.handleSendAPIRequest.bind(this)},
            {selector: '.save', action: this.saveAPIRequest.bind(this)},
            {selector: '.save_collection', action: this.addCollection.bind(this)},
            {selector: '#cancel-ajax', action: this.cancelAjaxRequest.bind(this)},
            {selector: '#new_collection', action: this.showNewCollectionModal.bind(this)},
            {selector: '#new_request', action: this.showNewApiRequestModal.bind(this)},
            {selector: '.edit_collection', action: this.showCollectionEditModal.bind(this)},
            {selector: '.delete_collection', action: this.showCollectionDeleteModal.bind(this)},
            {selector: '.confirm_delete', action: this.removeCollection.bind(this)},
            {selector: '.add_new_request', action: this.addAPIRequest.bind(this)},
            {selector: '.edit_api_request', action: this.showEditNameModal.bind(this)},
            {selector: '.delete_api_request', action: this.showDeleteApiRequestModal.bind(this)},
            {selector: '.open_api_request', action: this.openApiRequest.bind(this)},
            {selector: '.confirm_delete_api', action: this.deleteApiRequest.bind(this)},
            {selector: '.close_tab', action: this.closeTab.bind(this)}

        ];

        for (let event of events) {
            $(document).on('click', event.selector, event.action);
        }

        $(document).on('input', '.query_params input', this.handleUIUpdate.bind(this));
        $(document).on('input', '.query_params input', this.buildPath.bind(this));
        $(document).on('change', '.query_params input', this.handleUIUpdate.bind(this));
        $(document).on('change', '.query_params input', this.buildPath.bind(this));
        $(document).on('input', '.path', this.parseParam.bind(this));
        $(document).on('change', '.request_headers input', this.handleUIUpdate.bind(this));
        $(document).on('change', '.api_request_info select, .api_request_info input', this.handleUIUpdate.bind(this));
        $(document).on('change', '.api_request_info select', this.handleUpdateServer.bind(this));

        window.addEventListener('resize', this.resizeEditor.bind(this));


    }

    resizeEditor() {
        //FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출

        for (let i = 0; i < this.requestEditors.length; i++) {
            this.requestEditors[i].layout({
                width: 0
            });
        }
        for (let i = 0; i < this.responseEditors.length; i++) {
            this.responseEditors[i].layout({
                width: 0
            });
        }
        for (let i = 0; i < this.preRequestEditors.length; i++) {
            this.preRequestEditors[i].layout({
                width: 0
            });
        }
        for (let i = 0; i < this.postRequestEditors.length; i++) {
            this.postRequestEditors[i].layout({
                width: 0
            });
        }

        for (let i = 0; i < this.requestEditors.length; i++) {
            this.requestEditors[i].layout({});
        }
        for (let i = 0; i < this.responseEditors.length; i++) {
            this.responseEditors[i].layout({});
        }
        for (let i = 0; i < this.preRequestEditors.length; i++) {
            this.preRequestEditors[i].layout({});
        }
        for (let i = 0; i < this.postRequestEditors.length; i++) {
            this.postRequestEditors[i].layout({});
        }

    }

    showCollectionDeleteModal(event) {
        const collectionId = $(event.currentTarget).closest('button').data('collection');
        $('#confirm_delete_modal').find('.confirm_delete').data('id', collectionId);
        $('#confirm_delete_modal').modal('show');
    }

    getApiRequestModel(apiId) {
        let foundApi = null;
        this.collections.forEach(function (collection) {
            collection.apis.forEach(function (api) {
                if (api.id === apiId) {
                    foundApi = api;
                }
            });
        });

        return foundApi;
    }

    showCollectionEditModal(event) {
        const me = this;
        const collectionId = $(event.currentTarget).closest('button').data('collection');
        const collection = this.collections.filter(function (collection) {
            return collection.id === collectionId;
        })[0];

        $('#edit_name_modal').find('input').val('');
        $('#edit_name_modal').modal('show');

        let saveBtn = $('#edit_name_modal').find('button.change_name');
        saveBtn.off('click');

        saveBtn.on('click', function () {
            collection.name = $('#edit_name_modal').find('input').val();
            me.saveCollection(collection.id, collection.name);
            me.renderCollections();
            $('#edit_name_modal').modal('hide');
        });
    }

    showDeleteApiRequestModal(event) {
        let collectionId = $(event.currentTarget).closest('li').data('collection');
        let apiId = $(event.currentTarget).closest('li').data('id');
        $('#confirm_delete_api_modal').find('.confirm_delete_api').data('id', apiId);
        $('#confirm_delete_api_modal').find('.confirm_delete_api').data('collection', collectionId);
        $('#confirm_delete_api_modal').modal('show');
    }

    showNewApiRequestModal(event) {
        if (this.collections.length == 0) {
            $('.toast-body').text('새로운 컬렉션을 추가해 주세요.');
            $('.toast').toast('show');
            return;
        }
        $('#new_api_request_modal').modal('show');
    }

    showNewCollectionModal(event) {
        $('#new_collection_modal').find('input').val('');
        $('#new_collection_modal').modal('show');
    }

    showEditNameModal(event) {
        const me = this;
        const apiId = $(event.currentTarget).closest('li').data('id');
        const collectionId = $(event.currentTarget).closest('li').data('collection');

        const collection = this.collections.filter(function (collection) {
            return collection.id === collectionId;
        })[0];

        let apiRequest = collection.apis.filter(function (api) {
            return api.id === apiId;
        })[0];

        apiRequest.collectionId = collectionId;

        let saveBtn = $('#edit_name_modal').find('button.change_name');
        saveBtn.off('click');
        saveBtn.on('click', function () {
            apiRequest.name = $('#edit_name_modal').find('input').val();
            me.changeAPIName(apiRequest);
            me.renderCollections();
            $('#edit_name_modal').modal('hide');

            //탭이 열려 있으면, 닫았다가 다시 열어야 함.
            me.renderTabHeader();
            me.renderTabContent(apiRequest.index);

        });
        $('#edit_name_modal').find('input').val('');
        $('#edit_name_modal').modal('show');
    }

    getFieldValue(element) {
        if ($(element).is('select') || $(element).is('input[type="text"]')) {
            return $(element).val();
        }
        if ($(element).is('input[type="checkbox"]')) {
            return $(element).is(':checked');
        }
    }

    handleUIUpdate(event) {
        if (event) {
            event.preventDefault();
            const element = event.currentTarget;
            const fieldName = $(element).attr('name');
            const newValue = this.getFieldValue(element);
            const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
            let model = this.apiRequests[tabIndex];

            if (fieldName !== '') {
                _.set(model, fieldName, newValue);
            }
        }
    }

    handleUpdateServer(event) {
        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
        let model = this.apiRequests[tabIndex];
        let target = $('#api_request_' + model.id);
        target.find('input[name="basePath"]').val(this.basePath(model.server));
    }

    renderParams(params) {
        return params.map((param, index) => this.queryParamTemplate(param, index)).join('');
    }

    renderHeaders(headers) {
        return headers.map((header, index) => this.headerTemplate(header, index)).join('');
    }

    renderTabHeader() {
        let apiRequestTabTitle = $('#apiRequestTabTitle');
        apiRequestTabTitle.empty();

        for (let idx = 0; idx < this.apiRequests.length; idx++) {
            let li = `<li class="nav-item" role="presentation">
                        <button class="nav-link" id="api_request_tab_${this.apiRequests[idx].id}" data-bs-toggle="tab" type="button" role="tab" aria-controls="api_request_${this.apiRequests[idx].id}" data-bs-target="#api_request_${this.apiRequests[idx].id}" aria-selected="false">${this.apiRequests[idx].name}
                            <span class="close_tab"><i class="fa fa-light fa-close"></i></span>
                        </button>
                    </li>`;
            apiRequestTabTitle.append(li);
        }
    }

    renderTabContent(index) {
        var me = this;
        let apiRequestTabContent = $(this.apiTabContentTarget);
        let model = this.apiRequests[index];

        apiRequestTabContent.append(this.apiRequestTemplate(model, index));

        this.openTab(model.id);
        let target = $('#api_request_' + model.id);

        require(['vs/editor/editor.main'], () => {
            let requestBodyEditor = monaco.editor.create(target.find(".request_body")[0], {
                value: model.requestBody,
                language: 'json',
                theme: 'vs-light',
                automaticLayout: true
            });
            me.requestEditors.push(requestBodyEditor);
            target.find(".request_body")[0].addEventListener('shown.bs.tab', () => {
                me.requestEditors[index].layout();
            });

            me.requestEditors[index].onDidChangeModelContent((e) => {
                model.requestBody = requestBodyEditor.getValue();
            });

            target.find('.request_body_type').on('change', () => {
                let model = requestBodyEditor.getModel();
                monaco.editor.setModelLanguage(model, $(this).val());
            });

            let responseBodyEditor = monaco.editor.create(target.find(".response_body")[0], {
                value: '',
                language: 'json',
                theme: 'vs-light',
                automaticLayout: true
            });
            me.responseEditors.push(responseBodyEditor);

            let consoleEditor = monaco.editor.create(target.find(".console")[0], {
                value: '',
                language: 'text/plain',
                theme: 'vs-light',
                automaticLayout: true
            });

            me.consoleEditors.push(consoleEditor);


            let preRequestEditor = monaco.editor.create(target.find(".pre-request")[0], {
                value: model.preRequestScript,
                language: 'javascript',
                theme: 'vs-light',
                automaticLayout: true
            });
            me.preRequestEditors.push(preRequestEditor);
            target.find(".pre-request")[0].addEventListener('shown.bs.tab', () => {
                me.preRequestEditors[index].layout();
            });

            me.preRequestEditors[index].onDidChangeModelContent((e) => {
                model.preRequestScript = preRequestEditor.getValue();
            });

            let postRequestEditor = monaco.editor.create(target.find(".post-request")[0], {
                value: model.postRequestScript,
                language: 'javascript',
                theme: 'vs-light',
                automaticLayout: true
            });
            me.postRequestEditors.push(postRequestEditor);
            target.find(".post-request")[0].addEventListener('shown.bs.tab', () => {
                me.postRequestEditors[index].layout();
            });

            me.postRequestEditors[index].onDidChangeModelContent((e) => {
                model.postRequestScript = postRequestEditor.getValue();
            });

        });
    }

    renderResponse(tabIndex) {
        let model = this.apiRequests[tabIndex];
        let target = $('#api_request_' + model.id);
        target.find('.response_headers').empty();
        target.find(".response_status").empty();

        try {
            const parsedJson = JSON.parse(model.responseModel.body);
            const formattedJson = JSON.stringify(parsedJson, null, 2);
            this.responseEditors[tabIndex].setValue(formattedJson);
        } catch (e) {
            this.responseEditors[tabIndex].setValue(model.responseModel.body);
        }
        if (model.responseModel && model.responseModel.headers) {
            const headers = model.responseModel.headers;
            Object.entries(headers).forEach(([key, value]) => {
                target.find('.response_headers').append(this.responseHeaderTemplate(key, value));
            });
        }

        target.find(".response_status").text("status: " + model.responseModel.status);
        target.find(".response_time").text("time: " + model.responseModel.time + "ms");
        target.find(".response_size").text("size: " + model.responseModel.size + "bytes");

    }

    customHelper(event) {
        // Create and return the custom helper element
        let name = $(event.target).closest('.api_request_sortable').find('.open_api_request').text().trim();
        let apiId = $(event.target).closest('.api_request_sortable').data('id');
        return `<div style="display: flex; flex-direction: column; flex: 1; border: 2px dashed #333; padding: 10px;" data-id="${apiId}">
            <div>${name}</div>
            </div>`;
    }

    renderCollections() {
        let select = $('#modal_collection');
        let sidemenu = $(this.collectionTarget);
        select.empty();
        sidemenu.empty();

        for (let i = 0; i < this.collections.length; i++) {
            sidemenu.append(this.renderCollection(this.collections[i], i));
            let option = $('<option>');
            option.attr('value', this.collections[i].id);
            option.text(this.collections[i].name);
            select.append(option);
        }

        $("li .api_request_sortable").draggable({
            helper: this.customHelper,
            start: function (event, ui) {
                // You can add any additional data or styles you want when dragging starts
                $(this).addClass('dragging');
                const apiDetails = {
                    name: 'API 이름',
                    method: 'POST',
                    url: 'http://localhost:8080/api/test'
                };

            },
            stop: function (event, ui) {
                // Clean up, e.g., remove styles or data
                $(this).removeClass('dragging');
            }
        });

    }

    renderCollection(collection, index) {
        return this.collectionTemplate(collection, index);
    }

    openTab(id) {
        try {
            $(`#api_request_tab_${id}`).tab('show'); // API request 탭 활성화
        } catch (e) {
        }

        try {
            $(`#api_request_${id}`).find('.btn_request_body_tab').tab('show');  // Body 탭 활성화
        } catch (e) {
        }
    }

    addHeader(event) {
        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
        let model = this.apiRequests[tabIndex];
        model.headers.push({
            enabled: true,
            key: '',
            value: ''
        });
        this.renderHeaderView(tabIndex);
    }

    removeHeader(event) {
        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
        const index = $(event.currentTarget).closest('tr').data('index');
        let model = this.apiRequests[tabIndex];
        model.headers.splice(index, 1);
        this.renderHeaderView(tabIndex);
    }

    renderHeaderView(tabIndex) {
        let model = this.apiRequests[tabIndex];
        let target = $('#api_request_' + model.id);
        target.find('.request_headers').empty();
        target.find('.request_headers').append(this.renderHeaders(model.headers));
    }


    addQueryParam(event) {
        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
        let model = this.apiRequests[tabIndex];
        model.queryParams.push({
            enabled: true,
            key: '',
            value: ''
        });

        this.renderQueryParamsView(tabIndex);
    }

    removeQueryParam(event) {
        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
        const index = $(event.currentTarget).closest('tr').data('index');
        let model = this.apiRequests[tabIndex];
        model.queryParams.splice(index, 1);
        this.renderQueryParamsView(tabIndex);
    }

    renderQueryParamsView(tabIndex) {
        let model = this.apiRequests[tabIndex];

        let target = $('#api_request_' + model.id);
        target.find('.query_params').empty();
        target.find('.query_params').append(this.renderParams(model.queryParams));
    }

    parseParam(event) {
        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
        let model = this.apiRequests[tabIndex];
        model.path = $(event.currentTarget).val();
        model.queryParams = [];
        let queryString = model.path.split('?')[1];
        if (queryString) {
            let queryParamArray = queryString.split('&');
            for (let i = 0; i < queryParamArray.length; i++) {
                let queryParam = queryParamArray[i].split('=');

                model.queryParams.push({
                    enabled: true,
                    key: queryParam[0],
                    value: (queryParam[1] === undefined ? '' : queryParam[1])
                });
            }
            this.renderQueryParamsView(tabIndex);
        }
    }

    buildPath(event) {
        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
        let model = this.apiRequests[tabIndex];
        let queryString = model.path.split('?')[0];
        if (model.queryParams.length > 0) {
            queryString += '?';
        }
        for (let i = 0; i < model.queryParams.length; i++) {
            if (!model.queryParams[i].enabled) {
                continue;
            }
            queryString += model.queryParams[i].key + '=' + model.queryParams[i].value;
            if (i < model.queryParams.length - 1) {
                queryString += '&';
            }
        }
        model.path = queryString;
        $('#api_request_' + model.id).find('.path').val(model.path);
    }

    showLoadingOverlay() {
        $("#loading-overlay").show();
    }

    hideLoadingOverlay() {
        $("#loading-overlay").hide();
    }

    handleSendAPIRequest(event) {
        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));

        let model = this.apiRequests[tabIndex];

        if (!model.server) {
            $('.toast-body').text('서버를 등록해주세요.');
            $('.toast').toast('show');
            return;
        }

        let target = $('#api_request_' + model.id);
        target.find('.response_headers').empty();
        this.responseEditors[tabIndex].setValue('');
        let console = this.consoleEditors[tabIndex];
        model.responseModel = {};
        this.showLoadingOverlay();

        let startTime = new Date().getTime();
        this.currentAjaxRequest = this.apiClient.sendAPIRequest(model, null, this.consoleOutput.bind(this, console))
            .then(response => {
                if (response) {
                    model.responseModel = response;
                    let endTime = new Date().getTime();
                    model.responseModel.time = endTime - startTime;
                } else {
                    model.responseModel = {
                        status: 0,
                        time: 0,
                        size: 0,
                        headers: [],
                        body: ''
                    };
                }

                this.renderResponse(tabIndex);
                this.hideLoadingOverlay();
            })
            .catch(error => {
                $('.toast-body').text(error);
                $('.toast').toast('show');
                this.hideLoadingOverlay();
            });
    }
    consoleOutput(console, message) {
        var range = new monaco.Range(console.getModel().getLineCount(), 1, console.getModel().getLineCount(), 1);
        var id = {major: 1, minor: 1};
        if (typeof message === 'object') {
            message = JSON.stringify(message, null, 2);
        }
        var op = {identifier: id, range: range, text: message + '\n', forceMoveMarkers: true};
        console.executeEdits("my-source", [op]);
    }

    loadCollections() {
        const me = this;
        this.currentAjaxRequest = $.ajax({
            url: '/mgmt/collections/list.do',
            type: 'GET',
            contentType: 'application/json',
            success: function (data) {
                me.collections = data.map(collection => {
                    if (collection.apis) {
                        collection.apis = collection.apis.map(api => ({...api, collectionId: collection.id}));
                    }
                    return collection;
                });
            },
            error: function (response, textStatus, errorThrown) {
                me.hideLoadingOverlay();
                $('.toast-body').text(response.responseJSON.error);
                $('.toast').toast('show');
            },
            complete: function () {
                me.renderCollections();
                me.hideLoadingOverlay();
            }
        });
    }

    addCollection(event) {
        const name = $('#new_collection_name').val();
        const me = this;
        me.showLoadingOverlay();
        this.currentAjaxRequest = $.ajax({
            url: '/mgmt/collections/create.do',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({name: name}),
            error: function (response, textStatus, errorThrown) {
                me.hideLoadingOverlay();
                $('.toast-body').text(response.responseJSON.error);
                $('.toast').toast('show');
            },
            complete: function () {
                me.loadCollections();
                me.hideLoadingOverlay();
                $('#new_collection_modal').modal('hide');
            }
        });
    }

    saveCollection(id, name) {
        const me = this;
        me.showLoadingOverlay();
        this.currentAjaxRequest = $.ajax({
            url: '/mgmt/collections/update.do',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({id: id, name: name}),
            error: function (response, textStatus, errorThrown) {
                me.hideLoadingOverlay();
                $('.toast-body').text(response.responseJSON.error);
                $('.toast').toast('show');
            },
            complete: function () {
                me.loadCollections();
                me.hideLoadingOverlay();
                $('#new_collection_modal').modal('hide');
            }
        });
    }

    removeCollection(event) {
        let collectionId = $(event.currentTarget).closest('button').data('id');
        const me = this;
        me.showLoadingOverlay();
        this.currentAjaxRequest = $.ajax({
            url: '/mgmt/collections/delete.do',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({id: collectionId}),
            success: function () {
            },
            error: function (response, textStatus, errorThrown) {
                me.hideLoadingOverlay();
                $('.toast-body').text(response.responseJSON.error);
                $('.toast').toast('show');
            },
            complete: function () {
                me.loadCollections();
                me.hideLoadingOverlay();
                $('#confirm_delete_modal').modal('hide');
            }
        });
    }

    changeAPIName(model) {
        const me = this;
        me.showLoadingOverlay();
        this.currentAjaxRequest = $.ajax({
            url: `/mgmt/collections/${model.collectionId}/apis/save.do`,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(model),
            success: function (data) {
                let message = '저장되었습니다.';
                $('.toast-body').text(message);
                $('.toast').toast('show');
            },
            error: function (response, textStatus, errorThrown) {
                me.hideLoadingOverlay();
                $('.toast-body').text(response.responseJSON.error);
                $('.toast').toast('show');
            },
            complete: function () {
                me.hideLoadingOverlay();
            }
        });
    }

    saveAPIRequest(event) {
        const me = this;
        const index = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
        let model = this.apiRequests[index];
        me.showLoadingOverlay();

        this.currentAjaxRequest = $.ajax({
            url: `/mgmt/collections/${model.collectionId}/apis/save.do`,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(model),
            success: function (data) {
                let message = '저장되었습니다.';
                $('.toast-body').text(message);
                $('.toast').toast('show');
            },
            error: function (response, textStatus, errorThrown) {
                me.hideLoadingOverlay();
                $('.toast-body').text(response.responseJSON.error);
                $('.toast').toast('show');
            },
            complete: function () {
                me.hideLoadingOverlay();
            }
        });
    }

    addAPIRequest(event) {
        const collectionId = $('#modal_collection').val();
        let newApiName = $('#new_api_name').val();
        if (newApiName === '') {
            newApiName = '새로운 API';
        }

        const collection = this.collections.filter(function (collection) {
            return collection.id === collectionId;
        })[0];
        let me = this;
        let newApi = {
            id: '',
            server: null,
            method: 'GET',
            name: newApiName,
            path: '',
            headers: [],
            queryParams: [],
            requestBody: '',
            preRequestScript: '',
            postRequestScript: '',
            collectionId: collectionId,
            responseModel: {
                status: 0,
                time: 0,
                size: 0,
                headers: [],
                ody: ''
            }
        };
        newApi.collectionName = collection.name;

        this.currentAjaxRequest = $.ajax({
            url: `/mgmt/collections/${collectionId}/apis/save.do`,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(newApi),
            success: function (data) {
                newApi.id = data;
            },
            error: function (response, textStatus, errorThrown) {
                me.hideLoadingOverlay();
                $('.toast-body').text(response.responseJSON.error);
                $('.toast').toast('show');
            },
            complete: function () {
                me.loadCollections();
                me.apiRequests.push(newApi);
                me.currentIndex = me.apiRequests.length - 1;

                me.renderTabHeader();
                me.renderTabContent(me.currentIndex);
                $('#new_api_name').val('');
                me.hideLoadingOverlay();
                $('#new_api_request_modal').modal('hide');
            }
        });
    }

    cancelAjaxRequest() {
        if (this.currentAjaxRequest) {
            try {

                this.currentAjaxRequest.abort();
            } catch (e) {
                this.apiClient.abort();
            }
        }
        this.hideLoadingOverlay();
    }

    openApiRequest(event) {
        const collectionId = $(event.currentTarget).closest('li').data('collection');
        const apiId = $(event.currentTarget).closest('li').data('id');

        const collection = this.collections.filter(function (collection) {
            return collection.id === collectionId;
        })[0];
        let selectedApi = collection.apis.filter(function (api) {
            return api.id === apiId;
        })[0];

        if (selectedApi) {
            selectedApi.collectionId = collectionId;
            selectedApi.collectionName = collection.name;
            let tab = this.apiRequests.filter(function (api) {
                return api.id === selectedApi.id;
            })[0];

            if (!selectedApi.responseModel) {
                selectedApi.responseModel = {
                    status: 0,
                    time: 0,
                    size: 0,
                    headers: [],
                    body: ''
                };
            }

            if (tab) {
                this.currentIndex = this.apiRequests.findIndex(function (api) {
                    return api.id === selectedApi.id;
                });
                this.openTab(selectedApi.id);

            } else {
                this.apiRequests.push(selectedApi);
                this.currentIndex = this.apiRequests.length - 1;
                this.renderTabHeader();
                this.renderTabContent(this.currentIndex);
            }
        }
    }

    deleteApiRequest(event) {
        let collectionId = $(event.currentTarget).closest('button').data('collection');
        let apiId = $(event.currentTarget).closest('.confirm_delete_api').data('id');
        let apiIndex = this.apiRequests.findIndex(function (api) {
            return api.id === apiId;
        });
        if (apiIndex >= 0) {
            this.closeTabWithApiIndex(apiIndex);
        }
        const me = this;
        this.currentAjaxRequest = $.ajax({
            url: `/mgmt/collections/${collectionId}/apis/delete.do`,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({id: apiId}),
            success: function (data) {
            },
            error: function (response, textStatus, errorThrown) {
                $('.toast-body').text(response.responseJSON.error);
                me.hideLoadingOverlay();
            },
            complete: function () {
                me.hideLoadingOverlay();
                me.loadCollections();
                $('#confirm_delete_api_modal').modal('hide');
            }
        });
    }

    closeTabWithApiIndex(index) {
        if (index !== undefined) {
            const model = this.apiRequests[index];
            this.apiRequests.splice(index, 1);

            let apiRequestTabTitle = $(this.apiTabTitleTarget);
            apiRequestTabTitle.empty();
            this.renderTabHeader();
            $(`#api_request_${model.id}`).remove();
            // $(`#apiRequestTabTitle li:eq(${this.apiRequests.length - 1}) button`).tab('show');
            $(`#apiRequestTabTitle li:eq(0) button`).tab('show');
        }
    }

    closeTab(event) {
        const index = $('#apiRequestTabTitle').children().index($(event.currentTarget).closest('.nav-item'));
        this.closeTabWithApiIndex(index);
    }


}