import React from 'react';

import update from 'immutability-helper';

import { me } from '../api';

import { UserType } from './Types';

import Button from './Button';

export default class Settings extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            settings: {},
            me: {}
        };
    }
    componentDidMount() {
        me().then(visitor => {
            this.setState({
                me: visitor
            });
        });
    }
    onSubmitAvatar = (event) => {
        if (event.preventDefault) {
            event.preventDefault();
        }
        console.log('avatar update');
    }
    passwordChanged = (event) => {
        this.setState({
            settings: { password: event.target.value }
        });
    }
    onSubmitPassword = (event) => {
        if (event.preventDefault) {
            event.preventDefault();
        }
        console.log('password update');
    }
    emailChanged = (event) => {
        let newState = update(this.state, {
            me: { activeEmail: { $set: event.target.value } }
        });
        this.setState(newState);
        console.log('email update');
    }
    disableTelegram = () => {
        console.log('telegram disable');
    }
    disableFacebook = (event) => {
        if (event.preventDefault) {
            event.preventDefault();
        }
        console.log('facebook disable');
    }
    enableFacebook = (event) => {
        if (event.preventDefault) {
            event.preventDefault();
        }
        console.log('facebook enable');
    }
    disableTwitter = () => {
        console.log('twitter disable');
    }
    render() {
        const { me } = this.state;
        return (
            <article>
                <h1>Settings</h1>
                <fieldset>
                    <legend>Changing your avatar</legend>
                    <form>
                        <p>Avatar: <input type="file" name="avatar" /><br />
                            <small>Recommendations: PNG, 96x96, &lt;50Kb. Also, JPG and GIF supported.</small></p>
                        <p><input type="hidden" name="page" value="about" />
                            <Button onClick={this.onSubmitAvatar}>Update</Button>
                        </p>
                    </form>
                </fieldset>
                <fieldset>
                    <legend>Changing your password</legend>
                    <form>
                        <p>Change password: <input type="password" name="password" size="8" onChange={this.passwordChanged} />
                            <Button onClick={this.onSubmitPassword}>Update</Button><br />
                            <i>(max. length - 16 symbols)</i></p>
                    </form>
                </fieldset>
                <fieldset>
                    <legend>Telegram</legend>
                    {me.telegramName ? (
                        <form>
                            <div>Telegram: <b> {me.telegramName} </b>&mdash;
                                <Button onClick={this.disableTelegram}>Disable</Button>
                            </div>
                        </form>
                    ) : (
                            <p>To connect Telegram account: send any text message to <a href="https://telegram.me/Juick_bot">@Juick_bot</a>
                            </p>
                        )}
                </fieldset>
                {me.jids && (
                    <form>
                        <fieldset>
                            <legend style={{
                                background: 'url(//static.juick.com/settings/xmpp.png) no-repeat',
                                paddingLeft: '58px', lineHeight: '48px'
                            }}>XMPP accounts
                                </legend>
                            <p>Your accounts:</p>
                            <p>
                                {
                                    me.jids.map(jid =>
                                        <React.Fragment key="jid">
                                            <label><input type="radio" name="delete" value={jid} />{jid}</label><br />
                                        </React.Fragment>
                                    )
                                }
                            </p>
                            {
                                me.jids && me.jids.length > 1 &&
                                <p><input type="hidden" name="page" value="jid-del" /><input type="submit" value="  Delete  " /></p>
                            }
                            <p>To add new jabber account: send any text message to <a href="xmpp:juick@juick.com?message;body=login">juick@juick.com</a>
                            </p>
                        </fieldset>
                    </form>
                )}
                <fieldset>
                    <legend style={{
                        background: 'url(//static.juick.com/settings/email.png) no-repeat',
                        paddingLeft: '58px',
                        lineHeight: '48px'
                    }}>E-mail</legend>
                    <form>
                        <p>Add account:<br />
                            <input type="text" name="account" />
                            <input type="hidden" name="page" value="email-add" />
                            <input type="submit" value="  Add  " />
                        </p>
                    </form>
                    <form>
                        <p>Your accounts:</p>
                        <p>
                            {
                                me.emails ? me.emails.map(email =>
                                    <React.Fragment key={email}>
                                        <label>
                                            <input type="radio" name="account" value={email} />{email}
                                        </label>
                                        <br />
                                        {me.emails.length > 1 &&
                                            <p><input type="hidden" name="page" value="email-del" /><input type="submit" value="  Delete  " /></p>
                                        }
                                    </React.Fragment>
                                ) : '-'
                            }
                        </p>
                    </form>
                    {
                        me.emails &&
                        <>
                            {/** email_off **/}
                            <form>
                                You can receive notifications to email:<br />
                                Sent to <select name="account" value={me.activeEmail || 'Disabled'} onChange={this.emailChanged}>
                                    <option value="">Disabled</option>
                                    {
                                        me.emails.map(email =>
                                            <option key={email} value={email}>
                                                {email}
                                            </option>
                                        )
                                    }
                                </select>
                            </form>
                            {/** /email_off **/}
                            <p>&nbsp;</p>
                            <p>You can post to Juick via e-mail. Send your <u>plain text</u> messages to <span><a href="mailto:juick@juick.com">juick@juick.com</a></span>. You can attach one photo or video file.</p>
                        </>
                    }
                </fieldset>
                <fieldset>
                    <legend style={{
                        background: 'url(//static.juick.com/settings/facebook.png) no-repeat',
                        paddingLeft: '58px', lineHeight: '48px'
                    }}>
                        Facebook
        </legend>
                    {me.facebookStatus && me.facebookStatus.connected ? (
                        me.facebookStatus.crosspostEnabled ?
                            <form>
                                <div>
                                    Facebook: <b>Enabled</b> &mdash;
                                    <Button onClick={this.disableFacebook}>Disable</Button>
                                </div>
                            </form>
                            :
                            <form>
                                <div>
                                    Facebook: <b>Disabled</b> &mdash;
                                    <Button onClick={this.enableFacebook}>Enable</Button>
                                </div>
                            </form>
                    ) : (
                            <p>Cross-posting to Facebook:
                                <a href="/_fblogin">
                                    <img src="//static.juick.com/facebook-connect.png" alt="Connect to Facebook" />
                                </a>
                            </p>
                        )}
                </fieldset>
                <fieldset>
                    <legend style={{
                        background: 'url(//static.juick.com/settings/twitter.png) no-repeat',
                        paddingLeft: '58px', lineHeight: '48px'
                    }}>
                        Twitter</legend>
                    {me.twitterName ?
                        <form action="/settings" method="post">
                            <div>Twitter: <b>{me.twitterName}</b> &mdash;
            <input type="hidden" name="page" value="twitter-del" />
                                <Button onClick={this.disableTwitter}>Disable</Button>
                            </div>
                        </form>
                        :
                        <p>Cross-posting to Twitter: <a href="/_twitter"><img src="//static.juick.com/twitter-connect.png"
                            alt="Connect to Twitter" /></a></p>
                    }
                </fieldset>

            </article>
        );
    }
}

Settings.propTypes = {
    visitor: UserType.isRequired
};