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

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

const AccountBox = require('./account.box');

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            instances,
            invite,
        } = state;

        function sendInstanceState(id) {
            ws.sendInstanceState(id);
        }

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

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

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

        return {
            instances,
            invite,

            sendInstanceState,
            sendInstanceQueue,
            sendInstancePractice,
            sendInstanceInvite,
        };
    }
);

function JoinButtons(args) {
    const {
        instances,
        invite,

        sendInstanceState,
        sendInstanceQueue,
        sendInstancePractice,
        sendInstanceInvite,
    } = args;

    const discordBtn = (
        <button
            class='discord-btn'
            onClick={() => window.open('https://discord.gg/YJJgurM') }>
                &nbsp;
        </button>
    );

    if (instances.length) {
        return (
            <aside class='play-ctrl'>
                <div class="timer-container"></div>
                <div class="controls">
                    {discordBtn}
                    <div class="flex">
                        <div>&nbsp;</div>
                    </div>
                    <AccountBox />
                    <div class="instance-ctrl-btns">
                        <button disabled={true} >Chat</button>
                        <button
                            class='pvp ready full'
                            onClick={() => sendInstanceState(instances[0].id)}
                            type="submit">
                            Rejoin
                        </button>
                    </div>
                </div>
            </aside>
        );
    }

    const inviteBtn = () => {
        if (!invite) {
            return (
                <button
                    class='pvp ready'
                    onClick={() => sendInstanceInvite()}
                    type="submit">
                    Invite
                </button>
            );
        }

        function copyClick(e) {
            const link = `${document.location.origin}#join=${invite}`;
            const textArea = document.createElement('textarea', { id: '#clipboard' });
            textArea.value = link;
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                document.execCommand('copy');
                infoToast('Invite link copied to clipboard.');
            } catch (err) {
                console.error('link copy error', err);
                errorToast('Invite link copy error.');
            }

            document.body.removeChild(textArea);
            return true;
        }

        return (
            <button
                class='pvp ready enabled'
                onClick={copyClick}
                type="submit">
                Copy Link
            </button>
        );
    };

    return (
        <aside class='play-ctrl'>
            <div class="timer-container"></div>
            <div class="controls">
                {discordBtn}
                <div class="flex">
                    <button
                        class='practice ready'
                        onClick={() => sendInstancePractice()}
                        type="submit">
                        Learn
                    </button>
                    {inviteBtn()}
                </div>
                <AccountBox />
                <div class="instance-ctrl-btns">
                    <button disabled={true} >Chat</button>
                    <button
                        class='pvp ready'
                        onClick={() => sendInstanceQueue()}
                        type="submit">
                        PVP
                    </button>
                </div>
            </div>
        </aside>
    );
}

module.exports = addState(JoinButtons);