import React from 'react';
import {Container, Segment, Table, Label, Checkbox} from 'semantic-ui-react';
import {getRequest} from '../../../../actions';
import ListItem from './ListItem';

class LocStatus extends React.Component{
    state = {
        autoRefresh: false,
        list: []
    }
    tick = null

    componentDidMount(){
        this.getList();
    }

    componentWillUnmount(){
        clearInterval(this.tick);
    }

    changeRefresh = () => {
        this.setState({
            autoRefresh: !this.state.autoRefresh
        }, ()=>{
            this.checkRefresh();
        })
    }

    checkRefresh = () => {
        if(this.state.autoRefresh) {
            this.tick = setInterval(this.runTick, 2000);
        }else{
            clearInterval(this.tick);
        }
    }

    runTick = () => {
        this.getList();
    }

    getList = () => {
        let {toggleLoading, showDialog} = this.props;
        fetch('/api/wristband/getstatus', getRequest())
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return showDialog(json.message);
                this.setState({
                    list: [...(json.data.record || [])]
                })
            });
    }

    render (){
        let {i18n} = this.props;
        return (
            <Container>
                <Segment className="clearfix">
                    <Checkbox toggle checked={this.state.autoRefresh} onChange={(e,d) => {this.changeRefresh()}} label="自動更新" />
                    <Table>
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell>手環ID</Table.HeaderCell>
                                <Table.HeaderCell>地點</Table.HeaderCell>
                                <Table.HeaderCell>步數</Table.HeaderCell>
                                <Table.HeaderCell>剩餘電量</Table.HeaderCell>
                                <Table.HeaderCell>HR</Table.HeaderCell>
                                <Table.HeaderCell>SBP</Table.HeaderCell>
                                <Table.HeaderCell>DBP</Table.HeaderCell>
                                <Table.HeaderCell>卡路里</Table.HeaderCell>
                                <Table.HeaderCell>時間</Table.HeaderCell>
                                {/*<Table.HeaderCell></Table.HeaderCell>*/}
                            </Table.Row>
                        </Table.Header>
                        <Table.Body>
                            {
                                this.state.list.map((t,idx)=>(
                                    <ListItem key={idx} 
                                        i18n={i18n} 
                                        data={t} />
                                ))
                            }
                        </Table.Body>
                    </Table>
                </Segment>
            </Container>
        )
    }
}

export default LocStatus;