import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Anchor, Card, Col, Row, Spin } from 'antd'
import { AntIcon, Container } from 'components'
import moment from 'moment'
import store from 'store'
import { api } from 'common/api'

import Base from './base'
import Info from './setting/info'
import Safety from './setting/satety'

const { getState, dispatch, subscribe } = store

const navs = [
    { title: '基本信息', component: Info },
    { title: '安全设置', component: Safety },
]

export default class index extends Component {
    state = {
        loading: false,
        user: getState('user'),
    }

    container = window

    constructor(props) {
        super(props)

        this.unsubscribe = subscribe('user', user => {
            this.setState({ user })
        })
    }

    componentDidMount() {
        this.loadData()
    }

    componentWillUnmount() {
        this.unsubscribe()
    }

    loadData = async () => {
        this.setState({ loading: true })
        try {
            const { data } = await api.getLoginUser()
            if (data.birthday) {
                data.birthday = moment(data.birthday)
            }
            dispatch({
                type: 'SET_USER_ACCOUNT',
                user: data,
            })
        } finally {
            this.setState({ loading: false })
        }
    }

    setContainer = container => {
        this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
    }

    render() {
        const { loadData } = this

        const { loading, user } = this.state

        return (
            <Spin spinning={loading} indicator={<AntIcon type="loading" />} ref={this.setContainer}>
                <Container mode="fluid">
                    <Row gutter={16}>
                        <Col flex="200px">
                            <Anchor
                                getContainer={() => this.container}
                                offsetTop={24}
                                targetOffset={100}
                                wrapperStyle={{ backgroundColor: 'transparent' }}
                                onClick={e => e.preventDefault()}
                            >
                                {navs.map((item, i) => (
                                    <Anchor.Link
                                        key={i}
                                        href={`#account-setting-${i}`}
                                        title={item.title}
                                    />
                                ))}
                            </Anchor>
                        </Col>
                        <Col flex="1">
                            <Row gutter={16}>
                                <Col xl={{ span: 10, order: 2 }}>
                                    <br />
                                    <Base user={user} loadData={loadData} />
                                </Col>
                                <Col xl={{ span: 14, order: 1 }}>
                                    {navs.map((item, i) => (
                                        <section key={i} id={`account-setting-${i}`}>
                                            <br />
                                            <Card title={item.title}>
                                                <item.component user={user} loadData={loadData} />
                                            </Card>
                                        </section>
                                    ))}
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                </Container>
            </Spin>
        )
    }
}
