(function () {

    const mapStateToProps = (state) => ({ seats: state.seats, free: state.free, taken: state.taken });

    const mapDispatchToProps = (dispatch, ownProps) => ({
        pickSeat: (row, column) => dispatch(pickSeatAction(row, column))
    });

    const SeatButton = ({ row, column, enabled, picker }) => {
        const click = () => picker(row, column);
        return (
            <input type='button' className={enabled ? 'uk-button seat-free' : 'uk-button seat-taken'} onClick={click} value={'S' + (column + 1)} />
        );
    }

    const SeatApp = ({ seats, free, taken, pickSeat }) => {
        return (
            <form className="uk-form-stacked">
                <div class="uk-overflow-auto">
                    <table className="uk-table uk-table-divider uk-table-small">
                        <caption>Obsazeno je {taken}, zbývá {free} volných míst</caption>
                        <tbody>
                            {seats.map((row, rowIndex) => (
                                <tr key={rowIndex}>
                                    <td className="uk-text-middle">Ř<span className="uk-visible@m">ada </span>{(seats.length - rowIndex)}</td>
                                    {row.map((enabled, colIndex) => (
                                        <td key={rowIndex + 'x' + colIndex}>
                                            <SeatButton row={rowIndex} column={colIndex} enabled={enabled} picker={pickSeat} />
                                        </td>
                                    ))}
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </form>
        );
    }

    const ConnectedSeatApp = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(SeatApp);

    ReactDOM.render(<ReactRedux.Provider store={store}><ConnectedSeatApp /></ReactRedux.Provider>, document.getElementById('app1'));
})();


(function (scene) {

    var rotationNode = new pc.Entity("rotated", scene);
    var positionNode = new pc.Entity("positioned", scene);

    // příprava materiálů
    var seatFreeMaterial = new pc.StandardMaterial({});
    seatFreeMaterial.diffuse = new pc.Color(0, 0.6, 1);
    seatFreeMaterial.emissive = new pc.Color(0, 0.33, 0.9);
    seatFreeMaterial.update();
    var seatTakenMaterial = new pc.StandardMaterial({});
    seatTakenMaterial.diffuse = new pc.Color(1, 0.6, 0);
    seatTakenMaterial.emissive = new pc.Color(0.9, 0.33, 0);
    seatTakenMaterial.update();
    var backFreeMaterial = new pc.StandardMaterial({});
    backFreeMaterial.diffuse = new pc.Color(0, 0.53, 1);
    backFreeMaterial.emissive = new pc.Color(0, 0.33, 0.9);
    backFreeMaterial.update();
    var backTakenMaterial = new pc.StandardMaterial({});
    backTakenMaterial.diffuse = new pc.Color(1, 0.53, 0);
    backTakenMaterial.emissive = new pc.Color(0.9, 0.33, 0);
    backTakenMaterial.update();
    var holderFreeMaterial = new pc.StandardMaterial({});
    holderFreeMaterial.diffuse = new pc.Color(0, 0.33, 0.9);
    holderFreeMaterial.emissive = new pc.Color(0, 0.33, 0.9);
    holderFreeMaterial.update();
    var holderTakenMaterial = new pc.StandardMaterial({});
    holderTakenMaterial.diffuse = new pc.Color(0.9, 0.33, 0);
    holderTakenMaterial.emissive = new pc.Color(0.9, 0.33, 0);
    holderTakenMaterial.update();

    // Sedadlo
    function Seat(row, column) {
        var seat = new pc.Entity("seat" + row + "x" + column, scene);
        seat.setLocalPosition((column * 1.4), (row * -0.5), (row * 3));
        var bottom = new pc.Entity("bottom" + row + "x" + column, scene);
        bottom.addComponent("model", { type: "box" });
        bottom.setLocalScale(0.6, 0.5, 0.6);
        var right = new pc.Entity("right" + row + "x" + column, scene);
        right.addComponent("model", { type: "box" });
        right.setLocalScale(0.2, 0.8, 0.6);
        right.setLocalPosition(0.4, 0.15, 0);
        var left = new pc.Entity("left" + row + "x" + column, scene);
        left.addComponent("model", { type: "box" });
        left.setLocalScale(0.2, 0.8, 0.6);
        left.setLocalPosition(-0.4, 0.15, 0);
        var back = new pc.Entity("back" + row + "x" + column, scene);
        back.addComponent("model", { type: "box" });
        back.setLocalScale(0.8, 1.2, 0.1);
        back.setLocalPosition(0, 0.35, -0.25);

        // předání akce pro výběr sedadla do Redux úložiště
        function click() { store.dispatch(pickSeatAction(row, column)); }

        // připojení listeneru na kliknutí
        bottom.onclick = click;
        right.onclick = click;
        left.onclick = click;
        back.onclick = click;

        // metoda pro přepnutí
        this.switch = function (state) {
            if (state) {
                bottom.model.material = seatFreeMaterial;
                right.model.material = holderFreeMaterial;
                left.model.material = holderFreeMaterial;
                back.model.material = backFreeMaterial;
            } else {
                bottom.model.material = seatTakenMaterial;
                right.model.material = holderTakenMaterial;
                left.model.material = holderTakenMaterial;
                back.model.material = backTakenMaterial;
            }
        }

        seat.addChild(bottom);
        seat.addChild(right);
        seat.addChild(left);
        seat.addChild(back);
        positionNode.addChild(seat);
    }

    // vytvoření sedadel na scéně
    var state = store.getState();
    var seats = [];
    for (var r = 0; r < state.seats.length; r++) {
        seats.push([]);
        for (var c = 0; c < state.seats[r].length; c++) {
            var seat = new Seat(r, c);
            seat.switch(state.seats[r][c]);
            seats[r].push(seat);
        }
    }
    positionNode.setLocalPosition((-state.seats[0].length / 2) - 0.5, 0, (-state.seats.length * 1.5));
    rotationNode.addChild(positionNode);
    rotationNode.setLocalScale(0.2, 0.2, 0.2);
    rotationNode.rotateLocal(30, 0, 0);
    scene.root.addChild(rotationNode);

    // připojení na Redux úložiště
    store.subscribe(function () {
        state = store.getState();
        for (var r = 0; r < state.seats.length; r++) {
            for (var c = 0; c < state.seats[r].length; c++) {
                seats[r][c].switch(state.seats[r][c]);
            }
        }
    });

})(setupScene("canvas1"));;