import React from "react";
import {Button, Col, Container, Image, Row} from "react-bootstrap";
import {ActivityStatus, LeaveWord, LeaveWordType, PageProps} from "../entity";
import {Tooltip} from "@material-ui/core";
import {MyDialog} from "../ui/MyDialog";
import {MyInfo} from "./MyInfo";
import {Activity} from "../ui/Activity";
import {JSONResponse, Method, request} from "../interface";
import {EmptyBodyTransform, LeaveWordRes, LeaveWordTransform, PageDataMessage, SimpleMessage} from "../result";
import {changeActivity, scrollBottom} from "../public";
import {Cookies} from "react-cookie";
import {Api, prefix} from "../api";
import {SimpleSnackbar} from "../ui/toast";

/**
 * 我的留言
 */
export class MyLeaveWord extends React.Component<
    {
        user:string,
        cookies:Cookies
    },
{
    //留言信息
    data?:Array<LeaveWord>;
    //打开用户信息弹框
    openUserInfo:boolean;
    //用户id
    userId?:string;
    //活动详情
    activityId:number|null;
    //加载提示
    result:JSX.Element|null;
    scrollTip:string|null,
    page?:PageProps
}>{


    constructor(props: Readonly<any>) {
        super(props);

        this.state={
            result: null,
            activityId: null,
            data:[],
            openUserInfo:false,
            scrollTip:null
        }
    }

    componentDidMount() {
        this.loadLeaveWord(1)
    }


    /**
     * 加载留言
     */
    loadLeaveWord(page:number){

        let that=this

        request(Api.account.leaveWord,Method.GET,{currentPage:String(page)},new LeaveWordTransform(),function (res:LeaveWordRes) {
            switch (res.customResult) {
                case PageDataMessage.ok:
                        that.setState({
                            data: (that.state.data||[]).concat(res.dataList||[]),
                            page: res.page,
                            scrollTip: page > 1 ? '成功加载第' + page + '页数据' : null,
                        })

                    break
                case PageDataMessage.fail:
                    that.setState({
                        result:<h3 className="text-danger text-center">留言列表加载失败</h3>
                    })
                    break
            }
        })
    }

    /**
     * 解析留言类型
     * @param type
     */
    getType(type:LeaveWordType){
        switch (type) {
            case LeaveWordType.recommend:return "推荐提示"
            case LeaveWordType.apply:return "报名提示"
            case LeaveWordType.join:return "参加提示"
            case LeaveWordType.complete:return "完成提示"
            case LeaveWordType.friend:return "好友验证"
        }
    }

    /**
     * 拒绝好友邀请
     * @param id
     */
    doRefuse(id:number){
        let that=this
        request(Api.account.refuse+"/"+id,Method.POST, {},new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
            switch (res.customResult) {
                case SimpleMessage.ok:
                    that.setState({
                        result:<h3 className="text-info text-center">成功拒绝邀请</h3>
                    })
                    that.loadLeaveWord(1)
                    break
                case SimpleMessage.fail:
                    that.setState({
                        result:<h3 className="text-danger text-center">拒绝邀请失败，请联系管理员</h3>
                    })
                    break
            }
        })
    }

    /**
     * 同意好友邀请
     * @param data
     */
    doAgree(data:LeaveWord){
        let that=this
        request(Api.account.agree,Method.POST, {
            leaveWordId:data.leaveWordId+"",
            sourceUserId:data.userId
        },new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
            switch (res.customResult) {
                case SimpleMessage.ok:
                    that.loadLeaveWord(1)
                    that.setState({
                        result:<h3 className="text-info text-center">添加好友成功</h3>
                    })
                    break
                case SimpleMessage.fail:
                    that.setState({
                        result:<h3 className="text-danger text-center">添加好友失败，请联系管理员</h3>
                    })
                    break
            }
        })
    }

    /**
     * 解析留言
     * @param data
     * @param index
     */
    getData(data:LeaveWord,index:number){
        let body
       if(data.activityId!=null){
           body=<Col>
               <div>
                   <h5 className="text-center">{data.title}</h5>
               </div>
               <div>
                   <p className="text-ellipsis leave-word-height">{data.content}</p>
               </div>
               <div className="text-center">
                   <Button variant={"primary"} onClick={()=>this.setState({activityId:data.activityId})}>查看活动详情</Button>
               </div>
           </Col>
       }else{
           body=
               <Col>
                   <div className="invisible">
                       <h5>~</h5>
                   </div>
                  <div>
                      <p className="text-ellipsis leave-word-height">{data.info}</p>
                  </div>
                   <div className="text-center">
                       <Button variant={"primary"} className="mr-2" onClick={()=>this.doAgree(data)}>同意</Button>
                       <Button variant={"danger"} onClick={()=>this.doRefuse(data.leaveWordId)}>拒绝</Button>
                   </div>
               </Col>
       }

        return (
            <Container key={"Container"+index} className="mt-3 pt-2 pb-2 border-info border rounded">
                <Row>
                    <Col>
                        <h3 className="text-center">{this.getType(data.type)}</h3>
                    </Col>
                </Row>
                <Row>
                    <Col xs={3}>
                        <Image src={prefix.image+data.headImg} className="leave-word-headImg"/>
                        <span className="text-center user-name ml-3">{data.name}</span>

                            {data.type===LeaveWordType.friend?
                                <Tooltip title="查看用户信息" placement="right">
                                <Image src="user.svg" className="ml-1 mb-1 userIcon" onClick={()=>this.setState({openUserInfo:true,userId:data.userId})}/>
                                </Tooltip>:null}
                    </Col>
                    {body}
                </Row>

            </Container>
        )
    }

    render() {
        let that=this
        return (
            <div className="overflow-auto my-leave-world-height" onScroll={e=>scrollBottom(e,that,function () {
                that.loadLeaveWord((that.state.page?.currentPage||1)+1)
            })}>
                {this.state.data?this.state.data.length===0?<h3 className="text-info text-center">没有留言记录</h3>:this.state.data.map((data,index) =>this.getData(data,index)):<h3 className="text-info text-center">留言加载中</h3>}
                <MyDialog titleId="view-user" menuName="用户信息"
                          content={<MyInfo isOwn={false}  isAdd={false} userId={this.state.userId?this.state.userId:""}/>}
                          open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>

                <MyDialog content={<Activity cookies={this.props.cookies} activityId={this.state.activityId} hideButton={false} applyFunction={(activeId:number)=>{
                    changeActivity(activeId,ActivityStatus.apply, this,function () {
                    })
                    this.setState({activityId:null})
                }} />}
                                               open={this.state.activityId!=null} titleId="view-activity" menuName="活动详情"
                                               onClose={()=>this.setState({activityId:null})}/>


                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="my_leave_word_dialog" menuName="提示" onClose={()=>this.setState({
                    result:null
                })}/>

                {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}


            </div>
        )
    }
}