import React from 'react';
import ReactDOM from 'react-dom';
import { Modal, List, Menu, Button, Input, Label, Table } from 'semantic-ui-react';
import Datetime from 'react-datetime';
import {convertTime, padding} from '../../../../tools'

const getDayTime = ()=>{
    let d = new Date();
    d.setHours(0, 0, 0, 0);
    return d.getTime();
}

class WristbandPathInfo extends React.Component{
    state = {
        list: [],
        page: 1,
        maxPage: 1,
        stime: (getDayTime()),
        etime: (Date.now())
    }

    componentDidMount(){

    }

    closeView = () => {
        this.setState({
            list: [],
            page: 1,
            maxPage: 1,
            stime: (getDayTime()),
            etime: (Date.now())
        }, ()=>{
            this.props.closeModal();
        })
    }

    getList = () => {
        let {mac, showDialog, getRequest} = this.props;
        fetch('/api/wristband/getwristbandhealthinfo', getRequest({
            mac,
            stime: Math.floor(this.state.stime / 1000),
            etime: Math.floor(this.state.etime / 1000)
            }))
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return showDialog(json.message);
                let l = json.data.record || [];
                this.setState({
                    list: l,
                    page: 1,
                    maxPage: Math.ceil(l.length / 20)
                })
            })
    }

    nextPage = () => {
        let {page, maxPage} = this.state;
        this.setState({
            page: page >= maxPage ? maxPage : page+1
        })
    }

    prevPage = () => {
        let {page} = this.state;
        this.setState({
            page: page <= 1 ? 1 : page-1
        })
    }

    render() {
        let {closeModal, open} = this.props;

        let tmpList = this.state.list.slice((this.state.page - 1) * 20, ((this.state.page - 1) * 20 + 20))

        return (
            <Modal open={open} onClose={()=>{this.closeView()}}>
                <Modal.Header>
                    手環名稱: {this.props.wbname}
                </Modal.Header>
                <Modal.Content>
                    <Menu>
                        <Menu.Item>
                            <Input label="起始時間" input={
                            <Datetime dateFormat="YYYY-MM-DD" 
                                timeFormat="HH:mm" 
                                value={this.state.stime} 
                                input={true}
                                onChange={(e)=>{ this.setState({stime: (e.valueOf())}) }} />
                            }/>
                        </Menu.Item>
                        <Menu.Item>
                            <Input label="結束時間" input={
                            <Datetime dateFormat="YYYY-MM-DD" 
                                timeFormat="HH:mm" 
                                value={this.state.etime} 
                                input={true}
                                onChange={(e)=>{ this.setState({etime: (e.valueOf())}) }} />
                            }/>
                        </Menu.Item>
                        <Menu.Menu position="right">
                            <Menu.Item>
                                <Button type="button" content="搜尋" size="tiny" basic onClick={()=>{this.getList()}} />
                            </Menu.Item>
                        </Menu.Menu>
                    </Menu>

                    <div style={{textAlign: 'center'}}>
                        <Button content="上一頁" size="small" labelPosition="left" basic={true} color="black" icon="arrow left" onClick={() => {this.prevPage()}} />
                        <Label basic={true} color="blue" content={`${this.state.page || 1} / ${this.state.maxPage || 1}`} />
                        <Button content="下一頁" size="small" labelPosition="right" basic={true} color="black" icon="arrow right" onClick={() => {this.nextPage()}} />
                    </div>

                    <Table>
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell>HR</Table.HeaderCell>
                                <Table.HeaderCell>步數</Table.HeaderCell>
                                <Table.HeaderCell>SBP</Table.HeaderCell>
                                <Table.HeaderCell>DBP</Table.HeaderCell>
                                <Table.HeaderCell>卡路里</Table.HeaderCell>
                                <Table.HeaderCell>SOS</Table.HeaderCell>
                                <Table.HeaderCell>更新時間</Table.HeaderCell>
                            </Table.Row>
                        </Table.Header>
                        <Table.Body>
                            {
                                tmpList.map((t,idx) => {
                                    return (
                                        <Table.Row key={idx}>
                                            <Table.Cell>{parseInt(t.wphyloghr, 16)}</Table.Cell>
                                            <Table.Cell>{parseInt(t.wphylogsteps, 16)}</Table.Cell>
                                            <Table.Cell>{parseInt(t.wphylogsbp, 16)}</Table.Cell>
                                            <Table.Cell>{parseInt(t.wphylogdbp, 16)}</Table.Cell>
                                            <Table.Cell>{parseInt(t.wphylogcal, 16)}</Table.Cell>
                                            <Table.Cell>{parseInt(t.wphylogsos, 16)}</Table.Cell>
                                            <Table.Cell>{convertTime(t.wphylogtst, true)}</Table.Cell>
                                        </Table.Row>
                                    )
                                })
                            }
                        </Table.Body>
                    </Table>
                </Modal.Content>
            </Modal>
        )
    }
}

export default WristbandPathInfo;