import React from 'react';
import {Whiteboard, Events, DataHolder, SvgConverter} from '../../../src/index';


const strokeColors = ['black', 'red', 'blue', 'green', 'yellow'];
let strokeColorIndex = 0;

export default class App extends React.Component {

    constructor() {
        super();

        this.events = new Events();
        this.dataHolder = new DataHolder();
    }

    componentDidMount() {
        document.body.addEventListener('keydown', (ev) => {
            if (ev.keyCode >= 49 && ev.keyCode <= 57) { // '1' - '9'
                this.events.changeStrokeWidth(ev.keyCode - 48);
            }
            if (ev.keyCode === 67) { // 'c'
                strokeColorIndex = (strokeColorIndex + 1) % strokeColors.length;
                this.events.changeStrokeColor(strokeColors[strokeColorIndex]);
            }
        });

        this.undoButton.addEventListener('click', () => {
            this.events.undoPoint();
        });

        this.redoButton.addEventListener('click', () => {
            this.events.redoPoint();
        });

        this.clearButton.addEventListener('click', () => {
            this.events.clearPoint();
        });

        this.layer0Button.addEventListener('click', () => {
            this.events.changeLayer(0);
        });

        this.layer1Button.addEventListener('click', () => {
            this.events.changeLayer(1);
        });

        let downloadAsPng = document.querySelector('#download-as-png');
        downloadAsPng.addEventListener('mouseover', () => {
            let svg = document.querySelector('svg');
            let converter = new SvgConverter(svg);
            converter.toPngData().then(data => {
                downloadAsPng.href = data;
                downloadAsPng.download = 'xxx.png';
            });
        });

        let downloadAsJpeg = document.querySelector('#download-as-jpeg');
        downloadAsJpeg.addEventListener('mouseover', () => {
            let svg = document.querySelector('svg');
            let converter = new SvgConverter(svg);
            converter.toJpegData().then(data => {
                downloadAsJpeg.href = data;
                downloadAsJpeg.download = 'xxx.jpeg';
            });
        });

        let downloadAsSvg = document.querySelector('#download-as-svg');
        downloadAsSvg.addEventListener('mouseover', () => {
            let svg = document.querySelector('svg');
            let converter = new SvgConverter(svg);
            converter.toSvgData().then(data => {
                downloadAsSvg.href = data;
                downloadAsSvg.download = 'xxx.svg';
            });
        });
    }

    render() {
        return (
            <div style={{margin: 30}}>
                <h1>React-Whiteboard Sample</h1>
                <ul>
                    <li>{'To start/stop drawing line, click in the whiteboard.'}</li>
                    <li>{'To switch color, black -> red -> blue -> green -> yellow, press c key.'}</li>
                    <li>{'To select stroke width, press 1-9 key.'}</li>
                </ul>
                <Whiteboard events={this.events} dataHolder={this.dataHolder}
                            width={800} height={600}
                            style={{backgroundColor: 'lightyellow'}}>
                </Whiteboard>
                <button ref={undoButton => this.undoButton = undoButton}>Undo</button>
                <button ref={redoButton => this.redoButton = redoButton}>Redo</button>
                <button ref={clearButton => this.clearButton = clearButton}>Clear</button>
                |
                <button ref={layer0Button => this.layer0Button = layer0Button}>0</button>
                <button ref={layer1Button => this.layer1Button = layer1Button}>1</button>
            </div>
        );
    }
}

@@ -1181,23 +1181,22 @@
 is.layer
-0Button
+Select
 .addEven
@@ -1199,36 +1199,37 @@
 EventListener('c
-lick
+hange
 ', () =%3E %7B%0A     
@@ -1263,122 +1263,30 @@
 yer(
-0);%0A        %7D);%0A%0A        this.layer1Button.addEventListener('click', () =%3E %7B%0A            this.events.changeLayer(1
+this.layerSelect.value
 );%0A 
@@ -3485,38 +3485,38 @@
                %3C
-button
+select
  ref=%7Blayer0Butt
@@ -3510,23 +3510,22 @@
 f=%7Blayer
-0Button
+Select
  =%3E this
@@ -3534,23 +3534,22 @@
 ayer
-0Button
+Select
  = layer
 0But
@@ -3548,116 +3548,139 @@
 ayer
-0Button%7D%3E0%3C/button%3E%0A                %3Cbutton ref=%7Blayer1Button =%3E this.layer1Button = layer1Button%7D%3E1%3C/button
+Select%7D%3E%0A                    %3Coption value=%220%22%3E0%3C/option%3E%0A                    %3Coption value=%221%22%3E1%3C/option%3E%0A                %3C/select
 %3E%0A  

Add select to change layer