import PIXIApp from '../../lib/pixi/app.js'
import Button from '../../lib/pixi/button.js'
import ButtonGroup from '../../lib/pixi/buttongroup.js'
import Stylus from './stylus.js'

class StylusApp extends PIXIApp {

    sceneFactory() {
        return new Stylus(this.renderer)
    }

    setup() {
        let buttonColor = 0x666666
        super.setup()

        this.tools = new ButtonGroup({
            type: 'checkbox',
            margin: 0,
            x: 16,
            y: 16,
            fill: buttonColor,
            buttons: [{icon: 'edit',
                        iconColorActive: 0xFFFF00,
                        action: (event, button) => this.toggleEditMode() },
               {icon: 'undo',
                        action: (event, button) => this.undo(button) },
               {icon: 'redo',
                        action: (event, button) => this.redo(button) },
               {icon: 'delete',
                        action: (event, button) => this.clear(button) }
            ]
        })
        this.scene.addChild(this.tools)

        let defaults = { icon: 'brightness_1',
                    action: (event, button) => this.selectColor(button),
                    fillAlpha: 0,
                    strokeAlpha: 0,
                    fillActiveAlpha: 0,
                    strokeActiveAlpha: 0}

        this.palette = new ButtonGroup( {
            type: "radio",
            x: 200,
            y: 16,
            margin: 0,
            strokeAlpha: 0,
            fill: buttonColor,
            buttons: [
                Object.assign({}, defaults, { iconColor: 0x111111,
                                                iconColorActive: 0x111111}),     // tooltip: "Black",
                Object.assign({}, defaults, { iconColor: 0xFFFF00,
                                                iconColorActive: 0xFFFF00}),     // tooltip: "Yellow",
                Object.assign({}, defaults, { iconColor: 0x00FF00,
                                                iconColorActive:0x00FF00}),          // tooltip: "Green",
                Object.assign({}, defaults, { iconColor: 0xFF00FF,
                                                iconColorActive:0xFF00FF})     // tooltip: "Violet",
            ]
        })
        this.scene.addChild(this.palette)
    }

    selectColor(button) {
        this.scene.color = button.opts.iconColor
    }

    undo(button) {
        this.scene.undo()
        setTimeout(() => {
            button.active = false}, 200)
    }

    redo(button) {
        this.scene.redo()
        setTimeout(() => {
            button.active = false}, 200)
    }

    clear(button) {
        this.scene.clearAll()
        setTimeout(() => {
            button.active = false}, 200)
    }
}

const app = new StylusApp({ view: canvas })
window.app = app
app.setup()
app.run()