/* bagua.js */

const canvas = document.getElementById('baguaCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 150;

// Trigrams representing different forces in Bagua
const trigrams = ["☰", "☷", "☳", "☵", "☶", "☲", "☱", "☴"];
// Chinese names for the trigrams
const trigramNames = ["乾", "坤", "震", "坎", "艮", "离", "巽", "兑"];

// Helper function to calculate all permutations of an array
function permute(arr) {
    let result = [];
    if (arr.length === 0) return [[]];
    arr.forEach((item, i) => {
        let rest = arr.slice(0, i).concat(arr.slice(i + 1));
        let perms = permute(rest);
        perms.forEach(perm => result.push([item].concat(perm)));
    });
    return result;
}

// Generate all 40,320 permutations of trigrams
const trigramPermutations = permute(trigrams);

// Function to draw the Bagua diagram
function drawBagua(trigramSequence) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the circle
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // Place trigrams around the circle
    for (let i = 0; i < trigramSequence.length; i++) {
        const angle = (i / trigramSequence.length) * (2 * Math.PI) - Math.PI / 2;
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);

        // Draw the trigram symbol
        ctx.font = "24px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(trigramSequence[i], x, y);

        // Draw trigram name in Chinese
        ctx.font = "14px Arial";
        ctx.fillText(trigramNames[trigrams.indexOf(trigramSequence[i])], x, y + 30);
    }
}

// Function to get a specific Bagua permutation based on input (1 to 40,320)
function getBaguaPermutation(index) {
    if (index < 1 || index > trigramPermutations.length) {
        console.error("Index out of range. Must be between 1 and 40,320.");
        return;
    }
    return trigramPermutations[index - 1];
}

// Example usage: Draw the Bagua for permutation #1
function drawSpecificBagua(index) {
    const trigramSequence = getBaguaPermutation(index);
    drawBagua(trigramSequence);
}