// const { connect } = require('preact-redux');
const preact = require('preact');
const { connect } = require('preact-redux');

const { errorToast, infoToast } = require('../utils');
const actions = require('./../actions');

const VERSION = process.env.npm_package_version;

const Welcome = require('./welcome');

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            account,
            tutorial,
        } = state;

        function sendInstancePractice() {
            ws.sendInstancePractice();
        }

        return {
            promptRegister: tutorial === 99, // see events
            account,
            sendInstancePractice,
        };
    },
);

function Play(args) {
    const {
        account,
        promptRegister,
        sendInstancePractice,
    } = args;

    const news = (
        <div class="list">
            <div class="intro">
                <p> MNML is a turn-based 1v1 strategy game in an abstract setting. </p>
                <p>
                    Build a unique team of 3 constructs from a range of skills and specialisations.<br />
                    Outplay your opponent across multiple rounds by adapting to an always shifting meta. <br />
                </p>
            </div>
            <div class="awards"></div>
        </div>
    );

    const list = () => {
        if (promptRegister) {
            return (
                <div class='block-text'>
                    <p><b>You just won your first round of MNML.</b></p>
                    <p>Register below to play a real Bo5 against other players,<br/> play a practice round against a tougher AI opponent,<br/> customise your team & more...</p>
                    <p>glhf</p>
                </div>
            )
        }

        return (
            <div class='list play'>
                <figure>
                    <button
                        class="ready"
                        onClick={() => sendInstancePractice()}>
                        Play
                    </button>
                    <figcaption>Learn MNML</figcaption>
                </figure>
                <figure>
                    <button
                        class='discord-btn'
                        onClick={() => window.open('https://discord.gg/YJJgurM') }>
                            &nbsp;
                    </button>
                    <figcaption>Join the Community</figcaption>
                </figure>
            </div>
        );
    };

    return (
        <main>
            <div class="logo"/>
            <hr />
            {list()}
            <hr />
            <Welcome />
            <hr />
            {news}
        </main>
    );
}

module.exports = addState(Play);