import React, { useState, useEffect, useRef } from 'react';

import Link from 'next/link';
import Head from 'next/head';

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

import Button from 'react-bootstrap/Button';

export default function ControlPanel() {

    const [isPlaying, setIsPlaying] = useState(true);

    async function handlePlay() {
        await play();
        setIsPlaying(true);
    }

    async function handleStop() {
        await stop();
        setIsPlaying(false);
    }

    useEffect(() => {
        (async () => {
            try {
                const playingState = await getPlayState();
                setIsPlaying(playingState);
            } catch (err) {
                console.log('Error occured when getPlayState()', err);
            }
        })();

    }, []); // Run once.

    const cssBtn = { fontSize: "2rem", paddingLeft: "5rem", paddingRight: "5rem", }

    return (
        <Container>
            <Row>
                <Col><Button style={cssBtn} variant="danger" onClick={() => handleStop()} disabled={!isPlaying}> Stop </Button></Col>
                <Col><Button style={cssBtn} variant="success" onClick={() => handlePlay()} disabled={isPlaying}> PLay </Button></Col>
            </Row>
        </Container>
    );
}

async function getPlayState() { 
    console.log("getPlayState()");
    return true; 
}
async function play() {
    console.log("play()");
}
async function stop() {
    console.log("stop()");
}

/**
 * domain can´t be another website. Otherwise, the browser will block fetching due to CORS policy.
 * Solution: Create an endpoint on you website. Call that endpoint. The endpoint can now call
 *  from the backend to other website.
 */
async function sampleFetch(domain, accId) {
    const url = new URL(`api/stop/get-play-state`, domain);
    url.searchParams.set('accId', accId);
    const options = {
        method: 'GET',
    }

    const request = new Request(url, options);
    const response = await fetch(request);

    if (!response.ok) {
        const onError = {
            "method": request.method,
            "url": request.url
        }
        throw new Error(`HTTP status ${response.status}: ${response.statusText}: `, { cause: onError });
    }
    const jsonDate = await response.json();

    return jsonDate.state;
}