import React, {Component} from 'react';
import {Row, Col, List, Avatar} from 'antd';
import {stores_Context} from '../config'
import {observer} from 'mobx-react';
import { toJS } from "mobx";

class Wechat_session extends Component {

    static contextType = stores_Context;
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {wechatStore} = this.context;
        wechatStore.fetchWechatUserList();
    }

    handleUserClick(user) {
        const {wechatStore} = this.context;
        wechatStore.fetchContactList(user);
    }
    handleContactClick(contact) {
        const {wechatStore} = this.context;
        wechatStore.fetchChatMsgList(contact);
    }
    render() {
        const {wechatStore} = this.context;
        const userList = wechatStore.userList;
        const contactList = wechatStore.contactList;
        const chatMsgList = wechatStore.chatMsgList;

    return (
        <div>
            <Row>
                <Col span={8}>
                    <List
                        itemLayout="horizontal"
                        dataSource={userList}
                        renderItem={(user) => (
                            <List.Item onClick={() => {this.handleUserClick(user)}}>
                                <List.Item.Meta
                                    avatar={<Avatar src={user.avatar} />}
                                    title={user.username}
                                    description=""
                                />
                            </List.Item>
                        )}
                    />
                </Col>
                <Col span={8}>
                    <List
                        itemLayout="horizontal"
                        dataSource={contactList}
                        renderItem={(contact) => (
                            <List.Item onClick={() => {this.handleContactClick(contact)}}>
                                <List.Item.Meta
                                    avatar={<Avatar src={contact.avatar} />}
                                    title={contact.username}
                                    description=""
                                />
                            </List.Item>
                        )}
                    />
                </Col>
                <Col span={8}>
                    <List
                        itemLayout="horizontal"
                        dataSource={chatMsgList}
                        renderItem={(chatMsg) => (
                            <List.Item>
                                <List.Item.Meta
                                    avatar={<Avatar src={chatMsg.from_avatar} />}
                                    title={chatMsg.from_name}
                                    description={chatMsg.content.text}
                                />
                            </List.Item>
                        )}
                    />
                </Col>

            </Row>
        </div>
    );
    }

}
export default observer(Wechat_session);