// Initialize empty stock list
let stockList = ['2330.TW'];
let currentList = [];
const layout={'autosize': true, 'legend': {'title': {'text': ''},
 'tracegroupgap': 0}, 'title': {'text': 'Assets'}, 'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0],
  'title': {'text': 'Date'}, 'rangeslider': {'visible': true}}, 
  'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title': {'text': 'Price'}},
  'legend': {'yanchor': 'top', 'y': 1.3, 'xanchor': 'left', 'x': 0.01}, 'margin': {'l': 40, 'r': 40, 't': 40, 'b': 40},
}
// Cache frequently-used DOM elements
const $stockForm = $('#stock-form');
// const $stockSelect = $('#stock-select');
const $compSelect = $('#competition');
const $stockList = $('#stock-list');
const $submitBtn = $('#submit-btn');
const $addStockBtn = $('#addStockBtn');
const $submitPort = $('#submit-port');
const $sendPort = $('#sendPort');
const $commentPort = $('#commentPort');

// Function to add a new stock item to the list
function addStockItem(stock, text) {
    // Add item to array
    stockList.push(stock);
    // Update HTML list
    const $newItem = $(`<li class="list-group-item">
                            <span class="px-2">${text}</span> 
                            <a class="btn btn-sm btn-danger float-right delete-btn">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                        </li>`);
    $stockList.append($newItem);
}

// Function to delete a stock item from the list
function deleteStockItem(itemIndex) {
    // Remove item from array
    stockList.splice(itemIndex, 1);

    // Update HTML list
    $stockList.children().eq(itemIndex).remove();
}

// Event listener for delete button clicks
$stockList.on('click', '.delete-btn', function(){
    var itemIndex = $(this).closest('li').index()
    deleteStockItem(itemIndex);
    // console.log(stockList);
  });
// $stockList.on('click', '.delete-btn', function(event) {
//     // Get index of item to delete
//     const $deleteBtn = $(event.target);
//     const itemIndex = $deleteBtn.parent().index();

//     // Delete item from list
//     deleteStockItem(itemIndex);
// });


// Event listener for submit button click
$addStockBtn.click(function(event) {
    event.preventDefault();
    // console.log($('input[name=assetSelect]').val())
    // Get selected stock from form
    var text = $('input[name=assetSelect]').val();
    // const selectedStock = text;
    // var text = $('#stock-select option:selected').text();
    console.log(text)
    if (text != null && text!= '' && stockList.indexOf(text)===-1) {
        // Add new item to list
        addStockItem(text, text);

        // Clear input field
        $('#stockAll').val('');
    }
    console.log(stockList);
});

// Event listener for submit button click
$submitPort.click(function(event) {
  event.preventDefault();
  if (stockList.length > 1){
      $('#portModal').modal('show'); 
      console.log('asset confirm');
      // $(this).prop('disabled', true);
  }
});
// Event listener for submit button click
$sendPort.click(function(event) {
  if (stockList.length > 1){
    // $('#confirmMes').replaceWith("<span>投資組合已開始建立，請等待完成訊息，或１分鐘後至分析結果區查看！</span>")
    // $('#confirmModal').modal('show'); 


    $submitPort.prop('disabled', true);
    $.ajax({
        url: '/postPort', //todo create_strategy
        method: 'POST',
        data: { 
          name: $('input[name=portName]').val(),
          ts: Date.now(), 
          comp: $('#competition').val(),
          ratio: $('#ratio-select').val(),
          role: $('#role-select').val(),
          comment: $commentPort.val(),
          stockList: JSON.stringify(stockList)
         },
        success: function(response) {
            console.log(response);
            // var res = JSON.parse(response);
            event.preventDefault();
            // $('#modalTitle').text('完成建立') 
            $('#sucMes').html(response);
            // <span>投資組合建立時間間隔(或與登入時間間隔)必須大於60秒</span>
            $('#confirmModal').modal('show'); 

            $submitPort.prop('disabled', false);
        },
        error: function(xhr) {
            console.log('Error submitting stock list: ' + xhr.responseText);
        }
    });
    $commentPort.val('');
}
  // Get selected stock from form
});

// Event listener for submit button click
$submitBtn.click(function(event) {
    // Send stock list to server
    // console.log(event.target)
    // console.log(stockList)
    // console.log(cacheList.value, stockList);
    var texts = [];
    $('#stock-list span').each(function(){
        texts.push($(this).text());
    });
    // alert(currentList.includes(texts));
    if (stockList.length > 0 && JSON.stringify(currentList)!==JSON.stringify(stockList)) {
        // cacheList = stockList;
        $('#graph').html('<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>')
        
        $.ajax({
            url: '/postStock', //todo create_strategy
            method: 'POST',
            data: { stockList: JSON.stringify(stockList) },
            success: function(response) {
                $('#graph').html('')
                var graphs = JSON.parse(response);
                console.log(graphs.data);
                Plotly.newPlot("graph",
                    graphs.data, layout, {responsive: true});
                // console.log(response.layout);
                currentList = stockList.map(obj => obj);

            },
            error: function(xhr) {
                $('#graph').html('<div><span class="badge bg-warning">錯誤</span></div>')
                console.log('Error submitting stock list: ' + xhr.responseText);
            }
        });
    }
});
$(document).ready(function(){
    $("#search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#stock-select option").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    });
});

// window.onresize = function() {
//   Plotly.relayout('graph', {
//       'xaxis.autorange': true,
//       'yaxis.autorange': true
//   });
// };