// get date range by number of months
function getDateRange(months){            
    var startDate = new Date();
    var mill = startDate.setMonth((startDate.getMonth() - months));
    var endDate = +new Date();
    startDate = +new Date(mill);

    endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
    startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);

    var dateRange = [];
    dateRange.push([
        startDate,
        endDate
    ]);
    return dateRange;
}

// get number of months by window size
function getMonthCount(){
    const windowWidth = window.innerWidth;
    if (windowWidth >= 600) {
        return 12;
    }
    if (windowWidth >= 400) {
        return 9;
    }
    return 6;
}

var postsByDate = new Map();
{{ range ((where .Site.RegularPages "Type" "posts")) }}
    var date = "{{ .Date.Format "2006-01-02" }}";
    var postObj = new Map();
    postObj.set("title", "{{ .Title }}");
    postObj.set("link", "{{ .RelPermalink }}");
    var wordCount = {{ .WordCount }};

    var data = postsByDate.get(date);
    if (data === undefined) {
        data = new Map();
        data.set("posts", []);
        data.set("totalWordCount", 0);
    }
    var posts = data.get("posts");
    posts.push(postObj);
    var totalWordCount = data.get("totalWordCount");
    totalWordCount += wordCount;
    data.set("totalWordCount", totalWordCount);
    postsByDate.set(date, data);
{{- end -}}

var heatmapData = [];
for (const [date, data] of postsByDate.entries()) {
    heatmapData.push([date, data.get("totalWordCount")]);
}

function getHeatmapOptions(isDarkMode) {
    return {
        title: {
show: true,
top: 0,
left: 'center',
text: 'The House That 小步 Built',
textStyle: {
    color: isDarkMode ? '#FFF' : '#333', 
   
},

},

        legend: {
            show: false,
        },
        visualMap: {
            show: false,
            min: 0,
            max: 10000,
            type: 'piecewise',
            showLable: false,
            orient: 'horizontal',
            left: 'center',
            top: 0,
            itemGap: 10,
            inRange: {
                color: isDarkMode ? ['#687EFF', '#80B3FF', '#98E4FF'] : ['#CDE8E5', '#7AB2B2', '#4D869C'],
            },
        },
        calendar: {
            top: 50,
            left: 30,
            right: 30,
            cellSize: ['auto', 'auto'],
            range: getDateRange(getMonthCount()),
            itemStyle: {
                color: isDarkMode ? '#333' : '#fff',
                borderWidth: 0.5,
                borderColor: isDarkMode ? '#555' : '#eee',
            },
            yearLabel: { 
                show: false,
            },
            dayLabel: {
                align: 'center',
                nameMap: 'ZH',
            },
            monthLabel: {
                nameMap: 'EN',
            },
            splitLine: {
                show: false,
            },
        },
        tooltip: {
            hideDelay: 1000,
            enterable: true,
            formatter: function(params) {
                const date = params.data[0];
                const posts = postsByDate.get(date).get("posts");
                var content = `${date}`;
                for (const [i, post] of posts.entries()) {
                    content += "<br>";
                    var link = post.get("link");
                    var title = post.get("title");
                    content += `<a href="${link}" target="_blank">${title}</a>`;
                }
                return content;
            }
        },
        series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: heatmapData
        }
    };
}

// 检测当前颜色模式
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
option = getHeatmapOptions(isDarkMode);
myChart.setOption(option);

// 监听颜色模式变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
    option = getHeatmapOptions(event.matches);
    myChart.setOption(option);
});