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 (
            <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 key="jid">
                                            <label><input type="radio" name="delete" value={jid} />${jid}</label><br />
                                        </React.Fragment>
                                    )
                                }
                                {settings.auths.map(auth =>
                                    <React.Fragment key={auth.account}>
                                        <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>
        );
    }
}