/* eslint react/prop-types: 0 */
import React from 'react';
import Reveal from 'app/components/elements/Reveal';
import CloseButton from 'app/components/elements/CloseButton';
import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper';
import { browserHistory } from 'react-router';
import tt from 'counterpart';
import { FormattedDate } from 'react-intl';
import { connect } from 'react-redux';

class CheckLoginOwner extends React.Component {
    constructor() {
        super();
        this.state = {};
    }

    static getDerivedStateFromProps(nextProps) {
        const { login_owner_pubkey } = nextProps;
        if (login_owner_pubkey && this.props.login_owner_pubkey !== login_owner_pubkey) this.props.lookupPreviousOwnerAuthority();

        const { previous_owner_authority } = nextProps;
        if (previous_owner_authority && this.props.previous_owner_authority !== previous_owner_authority) {
            const last_valid_time = previous_owner_authority.get('last_valid_time');
            // has this been shown already?
            if (localStorage[this.getKey(nextProps)] !== last_valid_time) {
                let last_valid_date;
                if (!/Z$/.test(last_valid_time)) last_valid_date = last_valid_time + 'Z';
                last_valid_date = new Date(last_valid_date);

                return { last_valid_time, last_valid_date };
            }
        }

        return null;
    }

    hide = () => {
        const { understood } = this.state;
        if (understood) {
            const { last_valid_time } = this.state;
            localStorage[this.getKey()] = last_valid_time;
        }
        this.setState({ last_valid_time: null, last_valid_date: null });
    };

    getKey = (props = this.props) => {
        const { previous_owner_authority } = props;
        const username = previous_owner_authority.get('account');
        const key = `${username}_previous_owner_authority_last_valid_time`;
        return key;
    };

    recover = () => {
        this.hide();
        browserHistory.push('/recover_account_step_1');
    };

    onUnderstood = (e) => {
        const understood = e.target.checked;
        console.log('understood', understood);
        this.setState({ understood });
    };

    render() {
        const { last_valid_time, last_valid_date } = this.state;
        if (!last_valid_time) return <span />;
        const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
        const deadline = last_valid_date.getTime() + THIRTY_DAYS;

        // https://steemit.com/steem/@originate/steem-s-new-alert-after-key-updates-is-excellent-but-here-s-a-quick-update-that-would-make-it-even-better
        // "If you recently reset your password at(timestamp in strftime, example:  Thu, 21 Jul 2016 02:39:19 PST) this alert was most likely prompted by this action, otherwise your immediate attention is needed"
        return (
            <span>
                <Reveal show>
                    <CloseButton onClick={this.hide} />
                    <h3>{tt('g.account_updated')}</h3>
                    <p>
                        <span className="warning uppercase">
                            {tt('g.warning')}
                            :
                        </span>
                        {tt('checkloginowner_jsx.your_password_permissions_were_reduced')}
                        <TimeAgoWrapper date={last_valid_time} />
                        .
                        {' '}
                        {tt('checkloginowner_jsx.if_you_did_not_make_this_change') + ' '}
                        <a role="link" tabIndex={0} onClick={this.recover}>{tt('g.recover_your_account')}</a>
                        .
                    </p>
                    <p>
                        {tt('checkloginowner_jsx.ownership_changed_on')}
                        {' '}
                        <FormattedDate value={last_valid_date} />
                    </p>
                    <p>
                        {tt('checkloginowner_jsx.deadline_for_recovery_is')}
                        {' '}
                        <b>
                            <TimeAgoWrapper date={deadline} />
                        </b>
                        .
                    </p>
                    <p>
                        <input type="checkbox" onChange={this.onUnderstood} />
                        &nbsp;&nbsp;
                        {tt('checkloginowner_jsx.i_understand_dont_show_again')}
                    </p>
                    <div role="button" tabIndex={0} className="button" onClick={this.hide}>
                        {tt('g.ok')}
                    </div>
                </Reveal>
            </span>
        );
    }
}
export default connect(
    // mapStateToProps
    (state, ownProps) => {
        const current = state.user.get('current');
        const login_owner_pubkey = current && current.get('login_owner_pubkey');
        const previous_owner_authority = current && current.get('previous_owner_authority');
        return {
            ...ownProps,
            login_owner_pubkey,
            previous_owner_authority,
        };
    },
    // mapDispatchToProps
    (dispatch) => ({
        lookupPreviousOwnerAuthority: () => {
            dispatch({
                type: 'user/lookupPreviousOwnerAuthority',
                payload: {},
            });
        },
    })
)(CheckLoginOwner);
