import React from "react";
import {Button, Form, ListGroup, Tab, Table, Tabs} from "react-bootstrap";
import {ManagerActivity} from "./entity";
import {JSONResponse, Method, request} from "./interface";
import {API} from "./api";
import {EmptyBodyTransform, FindActivityRes, FindActivityTransform, PageDataMessage, SimpleMessage} from "./result";
import {MyDialog} from "./ui/MyDialog";
import moment from "moment";
import {Input} from "./ui/InputGroup";

const contentMaxLength=50

class EditActive extends React.Component<
    {
        onClick:Function;
        activity:ManagerActivity;
    },
    {
        activity:ManagerActivity;
    }>{


    constructor(props: Readonly<{ onClick: Function; activity: ManagerActivity }>) {
        super(props);

        this.state={
            activity:this.props.activity
        }
    }

    render() {
        return (
            <Form>
                <Input name="title" desc="活动标题" value={this.state.activity.title} onChange={(value:string)=>
                    this.setState({
                        activity:{...this.state.activity,...{title:value}}
                    })} valid={{check:this.isNotEmpty(this.state.activity.title)}}/>

                <Input name="content" desc="活动内容"  value={this.state.activity.content} as="textarea" valid=
                    {{check:this.state.activity.content.length>0,valid:this.state.activity.content.length===0?
                            "验证失败":"您还可输入"+(contentMaxLength-this.state.activity.content.length+"个字符")}}
                       maxLength={contentMaxLength} onChange={(value:string)=>this.setState({activity:{...this.state.activity,...{content:value}}})}/>

                <Button variant={"info"} block={true} className="ml-auto mr-auto col-3 mt-3" onClick={()=>this.props.onClick(this.state.activity)}>提交</Button>
            </Form>
        );
    }

    private isNotEmpty(name: any) {
        return String(name).length>0;
    }
}

/**
 * 活动管理
 */
export class Active extends React.Component<any, {
    activeList?:Array<ManagerActivity>;
    tipContent:JSX.Element|null
    dialog:JSX.Element|null
}>{


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

        this.state={
            tipContent:null,
            dialog:null
        }
    }

    //加载活动信息
    loadActive(page:number){
        let that=this
        request(API.account.findActivity,Method.GET,{
            currentPage:String(page)
        },new FindActivityTransform(),function (res:FindActivityRes) {
            switch (res.customResult) {
                case PageDataMessage.ok:
                    that.setState({
                        activeList:res.dataList
                    })
                    // that.loadActive(1)
                    break
                case PageDataMessage.fail:
                    that.setState({
                        tipContent:<h3>查询活动失败，请联系管理员</h3>
                    })
                    break
            }
        } )
    }

    componentDidMount() {
        this.loadActive(1)
    }

    render() {


        return (
            <Tabs defaultActiveKey="info" id="uncontrolled-tab-example">
                <Tab eventKey="info" title="活动管理">
                    <Table striped bordered hover className="mt-3">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>活动标题</th>
                                <th>活动内容</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>求助用户id</th>
                                <th>帮助用户id</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.activeList?this.state.activeList.length>0?this.state.activeList.map((active:ManagerActivity,index:number)=>
                                <tr key={"tr"+index}>
                                    <td>{index+1}</td>
                                    <td>{active.title}</td>
                                    <td>{active.content}</td>
                                    <td>{moment(active.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</td>
                                    <td>{moment(active.activityEndTime).format("YYYY-MM-DD HH:mm:ss")}</td>
                                    <td>{active.seekHelpUser}</td>
                                    <td>
                                        {active.helpUser != null ?
                                            <ListGroup>
                                                {active.helpUser.map((userId,index) =>
                                                    <ListGroup.Item key={'item'+index}>{userId}</ListGroup.Item>)}
                                            </ListGroup>:'无'
                                        }
                                    </td>
                                    <td><Button variant={"info"} onClick={()=>this.setState({
                                            dialog:<MyDialog content={<EditActive onClick={(activity:ManagerActivity)=>this.modifyActivity(activity)} activity={active}/>} open={true} titleId={"activity-dialog"} menuName={"修改活动信息"}
                                                             onClose={()=>this.setState({dialog:null})}/>
                                    })}>修改活动信息</Button></td>
                                </tr>
                            ):<h3 className="text-center text-info">没有活动信息</h3>:null
                            }
                        </tbody>
                    </Table>

                    {this.state.dialog}

                    <MyDialog content={this.state.tipContent} open={this.state.tipContent!=null} titleId={"user-dialog"} menuName={"操作提示"}
                              onClose={()=>this.setState({
                                  tipContent:null
                              })}/>
                </Tab>
            </Tabs>
        );
    }

    /**
     * 修改活动信息
     * @param activity
     */
    private modifyActivity(activity: ManagerActivity) {
        let that=this
        request(API.account.updateActivity+activity.activityId,Method.POST, {
                title:activity.title,
                content:activity.content
            },
            new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
                switch (res.customResult) {
                    case SimpleMessage.ok:
                        that.setState({
                            tipContent:<h3 className="text-info text-center">修改成功</h3>,
                            dialog:null
                        })
                        that.loadActive(1)
                        break
                    case SimpleMessage.fail:
                        that.setState({
                            tipContent:<h3 className="text-danger text-center">修改失败，请联系管理员</h3>
                        })
                        break
                }
        })
    }
}