const h2hMatchCount = {};
const h2hSelectedCount = {};
const h2hHalf = {};
const h2hLeague = {};
const h2hHome = {};
const h2hAway = {};
const h2hFixture = {};

function renderH2h(fixtures, type, divId, label, hClass) {
    if (!fixtures.length) {
        return;
    }
    const maxLength = Math.min(20, fixtures.length);
    const selectedCount = Math.min(10, fixtures.length);
    const sumData = { 'win': 0, 'lose': 0, 'draw': 0, 'odds': 0, 'odds_win': 0, 'o': 0, 'o_win': 0 };
    for (let i = 0; i < selectedCount; i++) {
        const f = fixtures[i];
        sumData['win'] += f.odds?.[0].result_open == 'W' ? 1 : 0;
        sumData['lose'] += f.odds?.[0].result_open == 'L' ? 1 : 0;
        sumData['draw'] += f.odds?.[0].result_open == 'D' ? 1 : 0;
        sumData['odds'] += f.odds?.[1].result_open != '' ? 1 : 0;
        sumData['odds_win'] += f.odds?.[1].result_open == 'W' ? 1 : 0;
        sumData['o'] += f.odds?.[2].result_open != '' ? 1 : 0;
        sumData['o_win'] += f.odds?.[2].result_open == 'O' ? 1 : 0;
    }
    sumData['all'] = Math.max(1, selectedCount);
    sumData['odds'] = Math.max(1, sumData['odds']);
    sumData['o'] = Math.max(1, sumData['o']);

    //init
    h2hMatchCount[divId] = Math.min(10, maxLength);
    h2hSelectedCount[divId] = selectedCount;
    h2hHalf[divId] = 0;
    h2hLeague[divId] = 0;
    h2hHome[divId] = 0;
    h2hAway[divId] = 0;
    h2hFixture[divId] = fixtures;

    html = ``;
    html += `<div class="pt-4">`;
    if (label) {
        html += `<h2 class="text-center">${label}</h2>`;
    }
    html += `</div>`;
    html += `<table id="${divId}Table" class="table-fixture" width="100%" cellspacing="0" cellpadding="0">`;
    html += `<thead>`;
    html += `<tr>`;
    html += `<th class="${hClass} text-white" colspan="16">`;
    if (type === 'home') {
        html += `<div class="form-check form-check-inline">`;
        html += `<input class="form-check-input" type="checkbox" id="${divId}_chkH2hHome" onchange="h2hHomeChange(event, '${divId}')">`;
        html += `<label class="form-check-label fw-normal" for="${divId}_chkH2hHome">ทีมเหย้า</label>`;
        html += `</div>`;
    } else {
        html += `<div class="form-check form-check-inline">`;
        html += `<input class="form-check-input" type="checkbox" id="${divId}_chkH2hAway" onchange="h2hAwayChange(event, '${divId}')">`;
        html += `<label class="form-check-label fw-normal" for="${divId}_chkH2hAway">ทีมเยือน</label>`;
        html += `</div>`;
    }
    html += `<div class="form-check form-check-inline">`;
    html += `<input class="form-check-input" type="checkbox" id="${divId}_chkH2hLeague" onchange="h2hLeagueChange(event, '${divId}')">`;
    html += `<label class="form-check-label fw-normal" for="${divId}_chkH2hLeague">ลีกเดียวกัน</label>`;
    html += `</div>`;
    html += `<div class="form-check form-check-inline">`;
    html += `<input class="form-check-input" type="checkbox" id="${divId}_chkHalf" onchange="h2hHalfChange(event, '${divId}')">`;
    html += `<label class="form-check-label fw-normal" for= "${divId}_chkHalf"> ครึ่งแรก</label>`;
    html += `</div>`;
    html += `<div class="d-inline-block" >`;
    html += `<select id="${divId}SelectMatch" class="form-select form-select-sm form-select-ssm" aria-label="จำนวนนัด" onchange="h2hMatchCountChange(event, '${divId}')">`;
    for (let i = 1; i <= maxLength; i++) {
        html += `<option value="${i}" ${i == selectedCount ? 'selected' : ''}>${i}</option>`;
    }
    html += `</select>`;
    html += `</div>`;
    html += `</th>`;
    html += `</tr>`;
    html += `<tr class="th2">`;
    html += `<th width="80">ลีก / ถ้วย</th>`;
    html += `<th width="90">เวลา</th>`;
    html += `<th width="165">ทีมเหย้า</th>`;
    html += `<th width="80">สกอร์</th>`;
    html += `<th width="165">ทีมเยือน</th >`;
    html += `<th width="80">เตะมุม</th>`;
    html += `<th class="" width="80">เหย้าชนะ</th>`;
    html += `<th width="60">เสมอ</th>`;
    html += `<th width="80">เยือนชนะ</th>`;
    html += `<th width="80">ชนะ / แพ้</th>`;
    html += `<th class="" width="60">เหย้า</th>`;
    html += `<th width="60">AH</th>`;
    html += `<th width="60">เยือน</th>`;
    html += `<th width="60">AH</th>`;
    html += `<th class="" width="63" >O / U</th>`;
    html += `</tr>`;
    html += `</thead>`;
    html += `<tbody id="${divId}Tbody">`;
    html += `</tbody>`;
    html += `</table>`;

    $('#' + divId).html(html);

    renderH2hContent(divId);
}

function renderH2hContent(divId) {
    const getTeamClass = (n) => n == homeTeam ? 'text-team-home' : (n == awayTeam ? 'text-team-away' : '');
    let len = Math.min(h2hMatchCount[divId], h2hFixture[divId].length);
    const s = h2hHalf[divId] === 1 ? 3 : 0;
    const fixtures_ = [];
    // console.log(h2hFixture[divId]);
    for (let i = 0; i < h2hFixture[divId].length; i++) {
        const f = h2hFixture[divId][i];
        if (h2hLeague[divId] === 1 && f['league'] !== leagueName) {
            continue;
        }
        if (h2hHome[divId] === 1 && f['team_home'] !== homeTeam) {
            continue;
        }
        if (h2hAway[divId] === 1 && f['team_away'] !== awayTeam) {
            continue;
        }
        fixtures_.push(f);
    }

    let html = ``;
    let sum = {
        'win': 0,
        'lose': 0,
        'draw': 0,
        'odds': 0,
        'odds_win': 0,
        'o': 0,
        'o_win': 0
    }
    for (let i = 0; i < fixtures_.length; i++) {
        const f = fixtures_[i];
        if (i > len - 1) {
            continue;
        }
        if (!f['odds'] || !f['odds'][s]) {
            continue;
        }
        if (!f['odds'][s + 1]) {
            continue;
        }
        html += `<tr class="in">`;
        html += `<td class="" data-bs-toggle="tooltip" data-bs-title="${f['league']}">${f['league_code']}</td>`
        html += `<td class="">${dateShort(f['time'])}</td>`
        html += `<td><a class="${getTeamClass(f['team_home'])} th" href="#">${f['team_home']}</a></td>`
        html += `<td>${f['score_half']} (${f['score']})</td>`
        html += `<td><a class="${getTeamClass(f['team_away'])} th" href="#">${f['team_away']}</a></td>`
        html += `<td>${f['corner_half']} (${f['corner']})</td>`
        html += `<td class="bg-td2">${f['odds'][s]['home_open']}</td>`
        html += `<td class="bg-td2">${f['odds'][s]['draw_open']}</td>`
        html += `<td class="bg-td2">${f['odds'][s]['away_open']}</td>`
        html += `<td class="bg-td2"><span class="tag-result tag-result-${f['odds'][s]['result_open']}">${f['odds'][s]['result_open']}</span></td>`
        html += `<td class="bg-td1">${f['odds'][s + 1]['home_open']}</td>`
        html += `<td class="bg-td1">${f['odds'][s + 1]['draw_open']}</td>`
        html += `<td class="bg-td1">${f['odds'][s + 1]['away_open']}</td>`
        html += `<td class="bg-td1"><span class="tag-result tag-result-${f['odds'][s + 1]['result_open']}">${f['odds'][s + 1]['result_open']}</span></td>`
        html += `<td><span class="tag-result tag-result-${f['odds'][s + 2]['result_open']}">${f['odds'][s + 2]['result_open']}</span></td>`
        html += `</tr>`;

        sum['win'] += f['odds'][s]['result_open'] == 'W' ? 1 : 0;
        sum['lose'] += f['odds'][s]['result_open'] == 'L' ? 1 : 0;
        sum['draw'] += f['odds'][s]['result_open'] == 'D' ? 1 : 0;
        sum['odds'] += f['odds'][s + 1]['result_open'] != '' ? 1 : 0;
        sum['odds_win'] += f['odds'][s + 1]['result_open'] == 'W' ? 1 : 0;
        sum['o'] += f['odds'][s + 2]['result_open'] != '' ? 1 : 0;
        sum['o_win'] += f['odds'][s + 2]['result_open'] == 'O' ? 1 : 0;
    }

    len = Math.max(1, len);
    sum['o'] = Math.max(1, sum['o']);
    sum['odds'] = Math.max(1, sum['odds']);

    html += `<tr>`;
    html += `<td colspan="16" class="fs-6">`;
    html += `<span class="text-info fw-500 in">${len}</span> นัดหลังสุด,`;
    html += `ชนะ <span class="text-success fw-500 in">${sum['win']}</span>,`;
    html += `เสมอ <span class="text-warning fw-500 in">${sum['draw']}</span>,`;
    html += `แพ้ <span class="text-danger fw-500 in">${sum['lose']}</span>,`;
    html += `อัตราชนะ: <span class="text-success fw-500 in">${(sum['win'] / len * 100).toFixed(1)}%</span>,`;
    html += `อัตราชนะต่อรอง: <span class="text-info fw-500 in">${(sum['odds_win'] / sum['odds'] * 100).toFixed(1)}% </span>,`;
    html += `อัตราเกมสูง: <span class="text-danger fw-500 in">${(sum['o_win'] / sum['o'] * 100).toFixed(1)}%</span>`;
    html += `</td>`;
    html += `</tr>`;

    $('#' + divId + 'Tbody').html(html);

    html = ``;
    if (h2hMatchCount[divId] > fixtures_.length) {
        h2hSelectedCount[divId] = fixtures_.length;
    } else {
        h2hSelectedCount[divId] = h2hMatchCount[divId];
    }
    for (let i = 0; i < fixtures_.length; i++) {
        html += `<option value="${i + 1}" ${(i + 1) == h2hSelectedCount[divId] ? 'selected' : ''}>${i + 1}</option>`;
    }
    $('#' + divId + 'SelectMatch').html(html);
}

function h2hHomeChange(event, divId) {
    h2hHome[divId] = event.target.checked ? 1 : 0;
    renderH2hContent(divId);
}

function h2hAwayChange(event, divId) {
    h2hAway[divId] = event.target.checked ? 1 : 0;
    renderH2hContent(divId);
}

function h2hLeagueChange(event, divId) {
    h2hLeague[divId] = event.target.checked ? 1 : 0;
    renderH2hContent(divId);
}

function h2hHalfChange(event, divId) {
    h2hHalf[divId] = event.target.checked ? 1 : 0;
    renderH2hContent(divId);
}

function h2hMatchCountChange(event, divId) {
    h2hMatchCount[divId] = event.target.value;
    renderH2hContent(divId);
}

function getH2h(fixtureId) {
    getData('fixtures/' + fixtureId + '/analysis/h2h',
        null,
        (data) => {
            // console.log(data);
            renderH2h(data['h2h'], 'home', 'h2hSection', 'ผลงานการพบกัน', 'bg-primary');
            renderH2h(data['home'], 'home', 'h2hHomeSection', 'ผลการแข่งย้อนหลัง <span class="text-team-home">'+homeTeam+'</span>', 'bg-team-home');
            renderH2h(data['away'], 'away', 'h2hAwaySection', 'ผลการแข่งย้อนหลัง <span class="text-team-away">'+awayTeam+'</span>', 'bg-team-away');
            renderHistoryCompare('tableLastFixtureCompare', 'เปรียบเทียบผลบอล', homeTeam, awayTeam, 'bg-primary', data);
        },
        (error) => {
            console.log(error);
        });
}