const postData = {
// REQUIRED
    userId: 'YOUR USER ID',
    company: 'YOUR COMPANY', // contact KinesteX
    key: 'YOUR KEY', // contact KinesteX
// OPTIONAL
    category: 'Fitness',
    planC: 'Cardio',
    age: 50,
    height: 150, // in cm
    weight: 200, // in kg
    gender: 'Male'
  };

    const isVisible = webViewContainer.style.display !== 'none';
    webViewContainer.style.display = isVisible ? 'none' : 'block';
    if (!isVisible) {
        // Moved inside the click listener to ensure it's set every time the WebView is shown
        webView.onload = () => {
            webView.contentWindow.postMessage(postData, 'https://kinestex.vercel.app');
        };
        webView.src = url; // Trigger the reload of the iframe with the specified url
    }

    window.addEventListener('message', (event) => {
        if (event.origin !== 'https://kinestex.vercel.app') {
            return;
        }
        try {
            const message = JSON.parse(event.data);
            console.log('Received data:', message);
            switch (message.type) {
                case 'finished_workout':
                case 'error_occured':
                case 'exercise_completed':
                    console.log('Received data:', message.data);
                    break;
                case 'exitApp':
                    webViewContainer.style.display = 'none';
                    break;
            }
        } catch (e) {
            console.error('Could not parse JSON message from WebView:', e);
        }
    });

const selectedOption = 'Complete User Experience';
const url = 'https://kinestex.vercel.app';

const selectedOption = 'Workout Plan';
const url = 'https://kinestex.vercel.app/plan/Full Cardio'; // replace with the plan you want to present
postData.planC = 'Cardio'; // specify the category of the plans to be presented

const selectedOption = 'Workout';
const url = 'https://kinestex.vercel.app/workout/Fitness Lite'; // replace with the workout you want to display

const selectedOption = 'Challenge';
const url = 'https://kinestex.vercel.app/challenge';
postData.exercise = 'Squats'; // specify the exercise to be presented
postData.countdown = 50; // specify the timer time for the challenge

document.addEventListener('DOMContentLoaded', () => {
    const webViewContainer = document.getElementById('webViewContainer');
    const webView = document.getElementById('webView');
    const toggleButton = document.getElementById('toggleWebView');
    const integrationOptions = document.getElementById('integrationOptions');

    const postData = {
        userId: 'YOUR USER ID',
        key: 'YOUR API KEY',
        company: 'YOUR COMPANY',
        lifestyle: "Sedentary", // Active, or Very Active
        age: 50,
        height: 150,
        weight: 200,
        gender: 'Male'
    };

    integrationOptions.addEventListener('change', () => {
        const selectedOption = integrationOptions.value;
        toggleButton.textContent = `Start ${selectedOption}`;
    });

    toggleButton.addEventListener('click', () => {
        const selectedOption = integrationOptions.value;
        let url;
        switch (selectedOption) {
            case 'Complete User Experience':
                url = 'https://kinestex.vercel.app';
                break;
            case 'Workout Plan':
                url = 'https://kinestex.vercel.app/plan/Full Cardio'; // replace with the plan you want to present
                postData.planC = 'Cardio'; // specify the category of the plans to be presented
                break;
            case 'Workout':
                url = 'https://kinestex.vercel.app/workout/Fitness Lite'; // replace with the workout you want to display
                break;
            case 'Challenge':
                url = 'https://kinestex.vercel.app/challenge';
                postData.exercise = 'Squats'; // specify the exercise to be presented
                postData.countdown = 50; // specify the timer time for the challenge
                break;
        }

        const isVisible = webViewContainer.style.display !== 'none';
        webViewContainer.style.display = isVisible ? 'none' : 'block';

        if (!isVisible) {
            webView.onload = () => {
                webView.contentWindow.postMessage(postData, url);
            };
            webView.src = url; // Set the new URL for the iframe
        }
    });
});