const preact = require('preact');
const { Component } = require('preact')
const { connect } = require('preact-redux');
const linkState = require('linkstate').default;

const SpawnButton = require('./spawn.button');

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

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


        function setPassword(current, password) {
            postData('/account/password', { current, password })
                .then(res => res.json())
                .then(data => {
                    if (!data.success) return errorToast(data.error_message);
                    infoToast('Password changed. Reloading...')
                    setTimeout(() => window.location.reload(), 5000);
                })
                .catch(error => errorToast(error));
        }

        function logout() {
            postData('/account/logout').then(() => window.location.reload(true));
        }


        function sendConstructSpawn(name) {
            return ws.sendMtxConstructSpawn(name);
        }

        return {
            account,
            ping,
            logout,
            setPassword,
            sendConstructSpawn,
        };
    },
);


class AccountStatus extends Component {
    constructor(props) {
        super(props);

        this.state = {
            setPassword: { current: '', password: '', confirm: ''},
        };
    }

    render(args) {
        const {
            account,
            ping,
            logout,
            setPassword,
            sendConstructSpawn,
        } = args;

        if (!account) return null;

        const passwordsEqual = () =>
            this.state.setPassword.password === this.state.setPassword.confirm;

        const setPasswordDisabled = () => {
            const { current, password, confirm } = this.state.setPassword;
            return !(passwordsEqual() && password && current && confirm);
        }

        return (
            <section class='account'>
                <div>
                    <h1>{account.name}</h1>
                    <dl>
                        <dt>Subscription</dt>
                        <dd>{account.subscribed ? 'some date' : 'unsubscribed'}</dd>
                    </dl>
                    <button><a href={`mailto:support@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
                    <button onClick={() => logout()}>Logout</button>
                </div>
                <div>
                    <label for="email">Email:</label>
                    <dl>
                        <dt>Current Email</dt>
                        <dd>{account.email ? account.email : 'No email set'}</dd>
                        <dt>Status</dt>
                        <dd>{account.email_confirmed ? 'Confirmed' : 'Unconfirmed'}</dd>
                    </dl>
                    <input
                        class="login-input"
                        type="email"
                        name="email"
                        placeholder="new email"
                    />
                    <button>Update</button>
                </div>
                <div>
                    <label for="current">Password:</label>
                    <input
                        class="login-input"
                        type="password"
                        name="current"
                        value={this.state.setPassword.current}
                        onInput={linkState(this, 'setPassword.current')}
                        placeholder="current"
                    />
                    <input
                        class="login-input"
                        type="password"
                        name="new"
                        value={this.state.setPassword.password}
                        onInput={linkState(this, 'setPassword.password')}
                        placeholder="new password"
                    />
                    <input
                        class="login-input"
                        type="password"
                        name="confirm"
                        value={this.state.setPassword.confirm}
                        onInput={linkState(this, 'setPassword.confirm')}
                        placeholder="confirm"
                    />
                    <button
                        disabled={setPasswordDisabled()}
                        onClick={() => setPassword(this.state.setPassword.current, this.state.setPassword.password)}>
                        Set Password
                    </button>
                </div>
                <div class="list">
                    <figure>
                        <figcaption>spawn new construct</figcaption>
                        <button onClick={() => sendConstructSpawn()} type="submit">
                            ¤50
                        </button>
                    </figure>
                </div>
            </section>
        );
    }
}

module.exports = addState(AccountStatus);