import { client } from "../index.js";
import { Game } from "../api/game/Game.js";
import AbstractView from "./abstracts/AbstractView.js";

export default class extends AbstractView
{
    constructor(params)
	{
        super(params, "Game");
		this.game = new Game(client, params.id);
    }

    draw_wall(ctx, stop_x, stop_y)
    {
        ctx.lineTo(stop_x, stop_y);
    }

    draw_paddle(ctx, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, pos)
    {
        let rail_size = Math.abs(rail_stop_x - rail_start_x) + Math.abs(rail_stop_y - rail_start_y) 
        
        let paddle_size = rail_size * this.game.config.paddle_ratio;

        let diff_x = rail_stop_x - rail_start_x,
            diff_y = rail_stop_y - rail_start_y;
        
        let pos_x = rail_start_x + diff_x * pos,
            pos_y = rail_start_y + diff_y * pos;
        
        let start_x = pos_x - (diff_x * (paddle_size / rail_size)),
            start_y = pos_y - (diff_y * (paddle_size / rail_size)),
            stop_x = pos_x + (diff_x * (paddle_size / rail_size)),
            stop_y = pos_y + (diff_y * (paddle_size / rail_size));

        console.log(start_x, start_y, stop_x, stop_y);
        ctx.moveTo(start_x, start_y);
        ctx.lineTo(stop_x, stop_y);

        ctx.moveTo(rail_stop_x, rail_stop_y);
    }

    _down()
    {
        pl
    }

    draw_ball(ctx, x, y)
    {
        ctx.rect(x, y, this.game.config.ball_size, this.game.config.ball_size);
    }

    draw_sides(ctx, nb_sides)
    {
        let start_x,
            start_y,
            stop_x,
            stop_y;
        
        for (let i = 0; i <= nb_sides; i++)
        {
            let angle = (i * 2 * Math.PI / nb_sides) + (Math.PI * 3 / 4);

            stop_x = this.game.config.center_x + 400 * Math.cos(angle);
            stop_y = this.game.config.center_y + 400 * Math.sin(angle);

            if (i == 0)
                ctx.moveTo(stop_x, start_y);
            if (i % 2 == 0)
                this.draw_wall(ctx, stop_x, stop_y);
            else
                this.draw_paddle(ctx, start_x, start_y, stop_x, stop_y, 0.5);

            start_x = stop_x;
            start_y = stop_y;
        }
    }

    draw_game()
    {
        let ctx = document.getElementById('canva').getContext('2d');

        ctx.beginPath()

        this.draw_sides(ctx, (this.game.players_id.length +0) * 2);
        this.draw_ball(ctx, this.game.ball_pos_x, this.game.ball_pos_y);

        ctx.strokeStyle = "#000000";
        ctx.lineWidth = 10;
        ctx.stroke();
    }

    render_game()
    {
        while (true)
        {
            this.draw_game();
            // TODO remove the line below
            break;
        }
    }

    start_game()
    {
        let canva = document.createElement("canvas");

        canva.height = this.game.config.size_x;
        canva.width = this.game.config.size_y;
        canva.id = "canva"; 

        document.getElementById("app").appendChild(canva);

        this.game.join()
        this.render_game();
    }

    async update_game_state()
    {
        await this.game.init();

        document.getElementById("game-state").innerText = this.game.state;

        //TODO invert line
        //if (this.game.started === true && this.game.finished === false)
        if (true)
            this.start_game();
    }

	async postInit()
	{
		let error_code = await this.game.init();

        if (error_code)
            return error_code;

        await this.update_game_state();
	}

    async getHtml()
	{
        return /* HTML */ `
            <link rel="stylesheet" href="/static/css/game.css">
            <h2 id="game-state"></h2>
            <div id="player_list"></div>
        `;
    }
}