// Fullscreen toggle utility for Phaser scenes

import { fontSize } from './responsive.js';

/**
 * Create a fullscreen toggle button in the corner of the screen
 * @param {Phaser.Scene} scene - The Phaser scene to add the button to
 * @param {object} options - Optional configuration
 * @param {number} options.x - X position (default: 770)
 * @param {number} options.y - Y position (default: 580)
 */
export function createFullscreenButton(scene, options = {}) {
    const x = options.x || 770;
    const y = options.y || 580;

    // Button background
    const btn = scene.add.rectangle(x, y, 50, 30, 0x000000, 0.6);
    btn.setStrokeStyle(2, 0xffffff);
    btn.setInteractive({ useHandCursor: true });
    btn.setScrollFactor(0);
    btn.setDepth(1000);

    // Button icon/text
    const icon = scene.add.text(x, y, '⛶', {
        fontSize: fontSize(18),
        fill: '#ffffff'
    }).setOrigin(0.5);
    icon.setScrollFactor(0);
    icon.setDepth(1001);

    // Update icon based on fullscreen state
    const updateIcon = () => {
        if (scene.scale.isFullscreen) {
            icon.setText('⛶');
        } else {
            icon.setText('⛶');
        }
    };

    // Toggle fullscreen on click
    btn.on('pointerdown', () => {
        btn.setFillStyle(0x333333, 0.8);
        btn.setScale(0.95);
        icon.setScale(0.95);
    });

    btn.on('pointerup', () => {
        btn.setFillStyle(0x000000, 0.6);
        btn.setScale(1);
        icon.setScale(1);

        if (scene.scale.isFullscreen) {
            scene.scale.stopFullscreen();
        } else {
            scene.scale.startFullscreen();
        }
        updateIcon();
    });

    btn.on('pointerover', () => {
        btn.setFillStyle(0x333333, 0.8);
    });

    btn.on('pointerout', () => {
        btn.setFillStyle(0x000000, 0.6);
    });

    // Listen for fullscreen changes
    scene.scale.on('enterfullscreen', updateIcon);
    scene.scale.on('leavefullscreen', updateIcon);

    return { btn, icon };
}

export default { createFullscreenButton };