import { Container, Graphics } from 'pixi.js';
import BaseMachine from 'src/slotMachines/BaseMachine';

/**
 * Hosts a slot machine with optional masking and boundary helpers for Storybook previews.
 */
export default class MachineContainer extends Container
{
    private readonly machine: BaseMachine;
    private readonly grBondaries: Graphics;
    private grMask?: Graphics;

    /**
     * @param machine - Slot machine instance to display.
     * @param mask - Enables the rendering mask around the machine (default: true).
     */
    constructor(machine: BaseMachine, mask = true)
    {
        super();
        this.machine = machine;

        if (mask)
        {
            this.grMask = new Graphics()
                .beginFill(0xff0000)
                .drawRect(
                    -this.machine.config.width / 2,
                    -this.machine.config.height / 2,
                    this.machine.config.width,
                    this.machine.config.height
                );
            this.machine.mask = this.grMask;
        }
        else
        {
            this.machine.mask = null;
        }

        this.grBondaries = new Graphics()
            .lineStyle(10, 0xff0000, 1, 1)
            .drawRect(
                -this.machine.config.width / 2,
                -this.machine.config.height / 2,
                this.machine.config.width,
                this.machine.config.height
            );

        this.addChild(this.machine);
        if (this.grMask)
        {
            this.addChild(this.grMask);
        }
        this.addChild(this.grBondaries);

        this.machine.x -= this.machine.config.width / 2;
        this.machine.y -= this.machine.config.height / 2;
    }
}
