let currentTab = '';
let currentTitle = 'most-active';
const allData = {
  'losers': {
    'data': [],
    'titleClass': 'custom',
    'titleImage': 'https://www.ndtvprofit.com/icons/arrow-bottom-right-thick.svg',
    'altText': 'Losers Icon',
    'title': 'Losers'
  },
  'gainers': {
    'data': [],
    'titleClass': 'custom',
    'titleImage': 'https://www.ndtvprofit.com/icons/arrow-top-right-thick.svg',
    'altText': 'Gainers Icon',
    'title': 'Gainers'
  },
  'most-active': {
    'data': [],
    'titleClass': 'active',
    'titleImage': 'https://www.ndtvprofit.com/icons/fire_icon.svg',
    'altText': 'Fire Icon',
    'title': 'Most Active'
  }
};
const baseUrl = 'https://www.ndtvprofit.com/foapi/market/getStockInsight?limit=4';
const apiMapping = {
  'nse': 'NIFTY%20500',
  'bse': 'BSE%20-%20500'
};
const processApiValues = (responses) => {
  const temp = [];
  responses.forEach(res => {
    const t = [];
    Object.keys(res).forEach(r => {
      if (typeof res[r] === "object") {
        t.push(res[r]);
      }
    });
    temp.push(t);
  });
  return temp;
};
const generateItems = (data) => {
  let items = '';
  data.forEach(d => {
    items += '<a target="_blank" href="https://www.ndtvprofit.com/markets?src=stocks_in_focus_widget">\n' +
      '              <div class="item-ctx ' + (d.change < 0 ? 'negative' : 'positive') + '">\n' +
      '                <div class="item">\n' +
      '                  <div class="first-row">\n' +
      '                    <span class="stock-name">' + d.name + '</span>' +
      '                    <span class="change-price ' + (d.change < 0 ? 'negative' : 'positive') + '">' + (d.change < 0 ?
                            (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(d.change)) :
                            '+' + (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(d.change))) + '</span>\n' +
      '                  </div>\n' +
      '                  <div class="second-row">\n' +
      '                    <span class="latest-price">' + (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(d.lastPrice)) + '</span>' +
      '                    <span class="change-perc ' + (d.change < 0 ? 'negative' : 'positive') + '">' + d.changePer.toFixed(2) + '%</span>\n' +
      '                  </div>\n' +
      '                </div>\n' +
      '                <div class="arrow"><img src="https://www.ndtvprofit.com/icons/ic_chevron_right_grey.svg"\n' +
      '                                        alt="Right Icon" /></div>\n' +
      '              </div>\n' +
      '            </a>';
  });
  return items;
};
const getIndicesData = async () => {
  await fetch('https://www.ndtvprofit.com/foapi/market/getIndices')
    .then(res => res.json())
    .then(res => {
      if (res.status) {
        const indices = processApiValues([res])[0];
        $('#indice-data-list').empty();
        indices.forEach(r => {
          $('#indice-data-list').append('<a target="_blank" href="https://www.ndtvprofit.com/markets?src=stocks_in_focus_widget">\n' +
            '            <div class="item-ctx ' + (r.change < 0 ? 'negative' : 'positive') + '">\n' +
            '              <div class="indices">' +
                            (r.change < 0 ? '<img src="https://www.ndtvprofit.com/icons/indice-negative.svg" alt="Negative Icon" />' :
                              '<img src="https://www.ndtvprofit.com/icons/indice-positive.svg" alt="Positive Icon" />') +
                            '</div>\n' +
            '              <div class="item">\n' +
            '                <div class="first-row">\n' +
            '                  <span class="stock-name">' + r.exchangeSymbol + '</span>\n' +
            '                  <span class="change-price ' + (r.change < 0 ? 'negative' : 'positive') + '">' +
                                (r.change < 0 ?
                                  (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(r.change)) :
                                  '+' + (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(r.change))) + '</span>\n' +
            '                </div>\n' +
            '                <div class="second-row">\n' +
            '                  <span class="latest-price">' + (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(r.lastPrice)) + '</span>\n' +
            '                  <span class="change-perc ' + (r.change < 0 ? 'negative' : 'positive') + '">' + r.changePer.toFixed(2) + '%</span>\n' +
            '                </div>\n' +
            '              </div>\n' +
            '              <div class="arrow">\n' +
            '                <img class="right" src="https://www.ndtvprofit.com/icons/ic_chevron_right_24px.svg" alt="Right Icon" />\n' +
            '              </div>' +
            '              <div class="item-mob">' +
            '                <div class="first-row">' + r.exchangeSymbol + '<img class="right" src="https://www.ndtvprofit.com/icons/ic_chevron_right_24px.svg" alt="Right Icon" /></div>' +
            '                <div class="second-row">' + (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(r.lastPrice)) + '</div>' +
            '                <div class="third-row ' + (r.change < 0 ? 'negative' : 'positive') + '">' +
                              '<span>' + (r.change < 0 ? +
                                  (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(r.change)) :
                                '+' + (new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(r.change))) +
                              '</span>' +
                              '<span class="change-perc">(' + r.changePer.toFixed(2) + '%)</span>' +
            '                </div>' +
            '              </div>\n' +
            '            </div>\n' +
            '          </a>');
        });
      }
    })
    .catch(err => {
      console.log('error in indices api = ', err);
    });
};
const getData = async (indice, mode) => {
  if ((mode !== 'click') || (indice !== currentTab)) {
    $('#' + currentTab).removeClass('active');
    currentTab = indice;
    $('#' + indice).addClass('active');

    try {
      await fetch(baseUrl + '&group=' + apiMapping[indice] + '&type=0')
        .then(res => res.json())
        .then(res => allData['losers'].data = processApiValues([res])[0]);
      await fetch(baseUrl + '&group=' + apiMapping[indice] + '&type=1')
        .then(res => res.json())
        .then(res => allData['gainers'].data = processApiValues([res])[0]);
      await fetch(baseUrl + '&group=' + apiMapping[indice] + '&type=2')
        .then(res => res.json())
        .then(res => allData['most-active'].data = processApiValues([res])[0]);

      $('#stock-tables').empty();
      ['most-active', 'gainers', 'losers'].forEach(tab => {
        const section = '<div class="stock-table-ctx" id="' + tab + '">\n' +
          '        <div class="title-ctx ' + allData[tab].titleClass + '">\n' +
          '          <img class="image" src="' + allData[tab].titleImage + '" alt="' + allData[tab].altText + '" />\n' +
          '          <span class="title">' + allData[tab].title + '</span>\n' +
          '        </div>\n' +
          '        <div class="stock-table">\n' +
          '          <div class="data-list">\n' +
          generateItems(allData[tab].data) +
          '          </div>\n' +
          '        </div>\n' +
          '      </div>';
        $('#stock-tables').append(section);
      });
      if (window.matchMedia('only screen and (max-width: 767px)').matches) {
        $('.stock-list-ctx .stock-tables .stock-table-ctx').hide();
        $('#' + currentTitle).show();
      }
    } catch (e) {
      console.log('error = ', e);
    }
  }
};
const clickOnTitle = (title) => {
  currentTitle = title;
  $('.stock-list-ctx .all-titles .title-ctx').removeClass('active');
  $('#' + title + '-title').addClass('active');
  $('.stock-list-ctx .stock-tables .stock-table-ctx').hide();
  $('#' + title).show();
};
const generateLoadingItems = () => {
  let items = '';
  Array.apply(null, Array(4)).forEach(() => {
    items += '<a class="anchor-loading">\n' +
'              <div class="item-ctx">\n' +
'                <div class="item">\n' +
'                  <div class="first-row">\n' +
'                    <span class="stock-name-loading"></span>' +
'                    <span class="change-price-loading"></span>\n' +
'                  </div>\n' +
'                  <div class="second-row">\n' +
'                    <span class="latest-price-loading"></span>' +
'                    <span class="change-perc-loading"></span>\n' +
'                  </div>\n' +
'                </div>\n' +
'              </div>\n' +
'            </a>';
  });

  return items;
};
const createShimmerForIndices = () => {
  $('#indice-data-list').empty();
  Array.apply(null, Array(2)).forEach(() => {
    $('#indice-data-list').append('<a class="anchor-loading">' +
                        '            <div class="item-ctx loading">\n' +
                          '            <div class="indices">\n' +
                          '              <img src="https://www.ndtvprofit.com/icons/image_loading_icon.svg" alt="Loading Icon">\n' +
                          '            </div>\n' +
                          '            <div class="item">\n' +
                          '              <div class="first-row">\n' +
                          '                <span class="stock-name-loading"></span>\n' +
                          '                <span class="change-price-loading"></span>\n' +
                          '              </div>\n' +
                          '              <div class="second-row">\n' +
                          '                <span class="latest-price-loading"></span>\n' +
                          '                <span class="change-perc-loading"></span>\n' +
                          '              </div>\n' +
                          '            </div>\n' +
                          '            <div class="item-mob">\n' +
                          '              <div class="first-row-loading"></div>\n' +
                          '              <div class="second-row-loading"></div>\n' +
                          '              <div class="third-row-loading"></div>\n' +
                          '            </div>\n' +
                          '          </div>' +
                        '         </a>');
  });
};
const createShimmerForStocks = () => {
  $('#stock-tables').empty();
  ['most-active', 'gainers', 'losers'].forEach(tab => {
        const section = '<div class="stock-table-ctx" id="' + tab + '">\n' +
                  '        <div class="title-ctx ' + allData[tab].titleClass + '">\n' +
                  '          <img class="image" src="' + allData[tab].titleImage + '" alt="' + allData[tab].altText + '" />\n' +
                  '          <span class="title">' + allData[tab].title + '</span>\n' +
                  '        </div>\n' +
                  '        <div class="stock-table">\n' +
                  '          <div class="data-list">\n' +
                                generateLoadingItems() +
                  '          </div>\n' +
                  '        </div>\n' +
                  '      </div>';
        $('#stock-tables').append(section);
      });
      if (window.matchMedia('only screen and (max-width: 767px)').matches) {
        $('.stock-list-ctx .stock-tables .stock-table-ctx').hide();
        $('#' + currentTitle).show();
      }
};

$(document).ready(function() {
  const url = new URL(window.location.href);
  const darkMode = url.searchParams.get('dm') || url.searchParams.get('DM');
  if (!!darkMode && darkMode === '1') {
    $('.stocks-today-ctx').addClass('manual-dark-mode');
    $('.stocks-today-ctx').css('background-color', '#1e1f1f').css('color', '#FFFFFF');
  }

  createShimmerForIndices();
  createShimmerForStocks();
  getData('nse');
  getIndicesData();

  setInterval(function() {
    createShimmerForIndices();
    createShimmerForStocks();
    getData(currentTab);
    getIndicesData();
  }, 60000);
});