import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'

import './passport.scss'
import { WithFullSize } from '@/HOCs'
import Login from './login'
import AccountLogin from './accountLogin'
import ForgotPassword from './forgotPassword'
import SetPassword from './setPassword'
import BindingTel from './bindingTel'
import { connect } from "react-redux";
import { compose } from "redux";

import account from './icons/account.png'
import qq from './icons/qq.png'
import sina from './icons/sina.png'
import wechat from './icons/wechat.png'


class Passport extends Component {

    redirectURL = '/'

    constructor(props) {
        super(props);
        const {location} = props
        const {pathname, search, hash} = location
        const {from} = location.state || {from: {pathname: pathname, search: search, hash: hash}}
        this.redirectURL = window.location.origin + from.pathname + from.search + from.hash
        this.state = {
            loginWays: [
                {
                    logo: account,
                    text: '账号登录',
                    id: 'account'
                },
                {
                    logo: wechat,
                    text: '微信',
                    url: '',
                    id: 'wechat'
                },
                {
                    logo: qq,
                    text: 'QQ',
                    url: `${API["passport-api"]}/mob/qqlogin?redirect_url=${this.redirectURL}`,
                    id: 'qq'
                },
                {
                    logo: sina,
                    text: '新浪',
                    url: `${API['passport-api']}/mob/sinalogin?redirect_url=${this.redirectURL}`,
                    id: 'sina'
                }
            ]
        }
    }


    componentDidMount() {
        this.routeWhenUserLoggedIn()
    }

    componentDidUpdate() {
        this.routeWhenUserLoggedIn()
        // console.log(this.props.location);

    }


    routeWhenUserLoggedIn = () => {
        let {history, location} = this.props
        let {data} = this.props.user
        if (data && Object.values(data).filter(item => !!item).length) {
            if (history.action === 'POP' && history.length <= 3) {
                history.push('/')
            } else {
                const {from} = location.state || {from: {pathname: '/', search: ''}};
                history.replace(from);
                // history.go(-1)
            }
        }
    }


    render() {
        let {match, location} = this.props
        return (
            <div className="passport">
                <Switch>
                    <Redirect exact
                              from={'/passport'}
                              to={{...location, ...{pathname: '/passport/login'}}}
                    />
                    <Route path={match.url + '/login'}
                           render={props => {
                               return <Login {...props} loginWays={this.state.loginWays}/>
                           }}/>
                    <Route path={match.url + '/account-login'} component={AccountLogin}/>
                    <Route path={match.url + '/forgot-password'} component={ForgotPassword}/>
                    <Route path={match.url + '/set-password'} component={SetPassword}/>
                    <Route path={match.url + '/binding-tel'} component={BindingTel}/>
                </Switch>
            </div>
        )
    }
}


export default compose(
    connect(
        state => ({user: state.user}),
        null
    ),
    WithFullSize
)(Passport)