import React from 'react';

export default class Settings extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            settings: {},
            userinfo: {},
            facebook: {}
        }
    }
    render() {
        const { settings, userinfo, facebook } = this.state;
        return (
            <div id="content">
                <article>
                    <h1>Settings</h1>
                    <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" /><input type="submit" value="  OK  " /></p>
                        <p>Full name: <input type="text" name="fullname" value={userinfo.fullName} /></p>
                        <p>Country: <input type="text" name="country" value={userinfo.country} /></p>
                        <p>URL: <input type="text" name="url" value={userinfo.url} size="32" /><br />
                            <small>Please, start with &quot;http://&quot;</small></p>
                        <p>About:<br />
                            <input type="text" name="descr" value={userinfo.description} style={{ width: '100%' }} /><br />
                            <small>Max. 255 symbols</small></p>
                    </form>
                    <fieldset>
                        <legend>Changing your password</legend>
                        <form onSubmit={this.updatePassword}>
                            <input type="hidden" name="page" value="password" />
                            <p>Change password: <input type="password" name="password" size="8" value={settings.password} />
                                <input type="submit" value="  Update  " /><br />
                                <i>(max. length - 16 symbols)</i></p>
                        </form>
                    </fieldset>


                    <form onSubmit={this.updateNotificationSettings}>
                        <fieldset>
                            <legend>Notification options</legend>
                            <p>
                                <input type="checkbox" name="jnotify" checked={settings.repliesEnabled} />
                                &nbsp;Reply notifications (&quot;Message posted&quot;)
                            </p>
                            <p><input type="checkbox" name="subscr_notify" checked={settings.subscriptionsEnabled} />
                                &nbsp;Subscriptions notifications (&quot;@user subscribed...&quot;)
                            </p>
                            <p><input type="checkbox" name="recomm" checked={settings.recommendationsEnabled} />
                                &nbsp;Posts recommendations (&quot;Recommended by @user&quot;)
                            </p>
                            <p><input type="submit" value="  OK  " /></p>
                        </fieldset>
                    </form>
                    <fieldset>
                        <legend style={{
                            background: 'url(//telegram.org/favicon.ico?3) no-repeat',
                            paddingLeft: '58px', lineHeight: '48px'
                        }}>Telegram</legend>
                        {settings.telegramName ? (
                            <form action="/settings" method="post">
                                <div>Telegram: <b>{{ telegram_name }}</b> &mdash;
                <input type="hidden" name="page" value="telegram-del" />
                                    <input type="submit" value="  Disable  " />
                                </div>
                            </form>
                        ) : (
                                <p>To connect Telegram account: send any text message to <a href="https://telegram.me/Juick_bot">@Juick_bot</a>
                                </p>
                            )}
                    </fieldset>
                    {settings.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>
                                    {
                                        settings.jids.map(jid =>
                                            <React.Fragment>
                                                <label><input type="radio" name="delete" value={jid} />${jid}</label><br />
                                            </React.Fragment>
                                        )
                                    }
                                    {settings.auths.map(auth =>
                                        <React.Fragment>
                                            <label><input type="radio" name="delete"
                                                value={auth.account} />{auth.account}</label>
                                            &mdash; <a href="#"
                                                onclick="alert(\'To confirm, please send &quot;AUTH {{ auth.getAuthCode() }}&quot; (without quotes) from this account to &quot;juick@juick.com&quot;.\'); return false;">Confirm</a><br />
                                        </React.Fragment>
                                    )}
                                </p>
                                {settings.jids && settings.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>
                                {
                                    settings.emails ? settings.emails.map(email =>
                                        <React.Fragment>
                                            <label>
                                                <input type="radio" name="account" value="{{ email }}" />{{ email }}
                                            </label>
                                            <br />
                                            {settings.emails.length > 1 &&
                                                <p><input type="hidden" name="page" value="email-del" /><input type="submit" value="  Delete  " /></p>
                                            }
                                        </React.Fragment>
                                    ) : `-`
                                }
                            </p>
                        </form>
                        {settings.emails &&
                            <React.Fragment>
                                {/** email_off **/}
                                <form>
                                    You can receive notifications to email:<br />
                                    Sent to <select name="account">
                                        <option value="">Disabled</option>
                                        {email.map(email =>
                                            <option value={email} selected={email.active == email}>
                                                {email}
                                            </option>
                                        )}
                                    </select>
                                    <input type="hidden" name="page" value="email-subscr" />
                                    <input type="submit" value="OK" />
                                </form>
                                {/** /email_off **/}
                                <p>&nbsp;</p>
                                <p>You can post to Juick via e-mail. Send your <span style="text-decoration: underline">plain text</span>
                                    messages to <span><a href="mailto:juick@juick.com">juick@juick.com</a></span>. You can attach one photo or video file.</p>
                            </React.Fragment>
                        }
                    </fieldset>
                    <fieldset>
                        <legend style={{
                            background: 'url(//static.juick.com/settings/facebook.png) no-repeat',
                            paddingLeft: '58px', lineHeight: '48px'
                        }}>
                            Facebook
        </legend>
                        {facebook.connected ? (
                            facebook.crosspostEnabled ?
                                <form action="/settings" method="post">
                                    <div>
                                        Facebook: <b>Enabled</b> &mdash;
                <input type="hidden" name="page" value="facebook-disable" />
                                        <input type="submit" value="  Disable  " />
                                    </div>
                                </form>
                                :
                                <form action="/settings" method="post">
                                    <div>
                                        Facebook: <b>Disabled</b> &mdash;
                <input type="hidden" name="page" value="facebook-enable" />
                                        <input type="submit" value="  Enable  " />
                                    </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>
                        { settings.twitter_name ?
    <form action="/settings" method="post">
                            <div>Twitter: <b>{ settings.twitter_name }</b> &mdash;
            <input type="hidden" name="page" value="twitter-del" />
                                <input type="submit" value="  Disable  " />
                            </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>
            </div >
        )
    }
}