class mvwizExcel{

    //----------------------------------------- 시작 ------------------------------------------
    constructor(id,config){
        
        this.config = config;
        this.id = id;
        this.uid = id+"-uniqid-01";
        let styleValue = $('#'+id).attr("style");
        let nameValue = $('#'+id).attr("name");
        let value = $('#'+id).val();


		let uploadlink = encodeURIComponent(this.config.upload);
		let columnslink = encodeURIComponent(this.config.columns);
		this.config.width = this.config.width||"400px";


        $('#'+id).replaceWith(`
		<div style="width:${this.config.width};">
            <div id="${this.uid}-frame" onclick="window.open('/plug-in/mvwizFramework.9.0/js/mvwizExcel.1.0.1.php?id=${this.uid}&upload=${uploadlink}&columns=${columnslink}','mvwizeditorexcelwindow','width=1200,height=700');"></div>
		</div>
            <textarea style="display:none;width:100%;height:200px;" name="${nameValue}" id="${this.uid}-value">${value}</textarea>
            <style>
#${this.uid}-frame {
    width: 100% !important;
    height: 200px;
    border: 1px solid #afbdb0;
    box-sizing: border-box;
    overflow: scroll;
	white-space: nowrap;
    cursor: pointer;
	background-color:#FFFFFF;
}

#${this.uid}-frame::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#${this.uid}-frame::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ecf2ed; /* 엑셀 녹색 느낌의 연한 색상 */
}

#${this.uid}-frame::-webkit-scrollbar-thumb {
    background-image: linear-gradient(45deg, #32a852, #32a852); /* 엑셀 녹색 */
    border-radius: 10px;
    -webkit-box-shadow: rgba(0, 0, 0, .12) 0 3px 13px 1px;
}

#${this.uid}-frame::-webkit-resizer {
    background-color: #d1dec1;
}

#${this.uid}-frame::-webkit-scrollbar-corner {
    background: #d1dec1;
}



#${this.uid}-frame table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
#${this.uid}-frame th, #${this.uid}-frame td {
    border: 1px solid #dddddd !important;
    text-align: left;
    padding: 3px;
    font-size:9pt;
    width:100px;
    height:20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	color:#000000;
}
#${this.uid}-frame td:first-child,
#${this.uid}-frame th:first-child{
    width:50px;
}

#${this.uid}-frame th {
    background-color: #108c00;
    color: white;
    width:100px;
}
#${this.uid}-frame .row-header, #${this.uid}-frame .column-header {
    background-color: #108c00;
    color: white;
    text-align:center;

}
#${this.uid}-frame .row-header {
    width: 30px;
}
#${this.uid}-frame .column-header {
    width: 100px;
}
            </style>
        `);

        mvwizExcel_cellParsing(this.uid);
    }

}


function mvwizExcel_cellParsing(uid) {
    let value = $('#'+uid+'-value').val();
    let data = JSON.parse(value);


    // Check if data is empty
    if (data.length === 0 || data[0].length === 0) {
        $('#'+uid+'-frame').empty();
        $('#'+uid+'-frame').append(`<div style="text-align:center;padding:10px;">No data available</div>`); // Display a message if no data
        return;
    }

    // Create table element
    var table = $('<table></table>');



    // Create header row
    var headerRow = $('<tr></tr>');
    var numColumns = data[0].length;
    headerRow.append($('<th></th>').addClass('column-header')); // Top-left empty corner cell

	

    // Create column headers A, B, C, ...
    for (var i = 0; i < numColumns; i++) {
        var columnHeader = $('<th></th>').text(String.fromCharCode(65 + i)).addClass('column-header');
        headerRow.append(columnHeader);
    }
    table.append(headerRow);

	

    // Create data rows with row headers 1, 2, 3, ...
    data.forEach(function(rowData, index) {
        var row = $('<tr></tr>');
        var rowHeader = $('<td></td>').text(index + 1).addClass('row-header');
        row.append(rowHeader);

        rowData.forEach(function(cellData) {
            var td = $('<td></td>').text(cellData);
            row.append(td);
        });
        table.append(row);
    });


	


    // Append the table to the frame
    $('#'+uid+'-frame').empty();
    $('#'+uid+'-frame').append(table);
}