import React from 'react';
import {Grid, Header, Container, Segment, List, Label} from 'semantic-ui-react';
import {getRequest} from '../../../../actions';

class LocStatusWloc extends React.Component {
    state = {
        loc: []
    }
    tick = null

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

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

    getLocList = ()=>{
        let {toggleLoading, showDialog} = this.props;
        toggleLoading(1);
        fetch('/api/wristband/getlocationlist', getRequest())
            .then(response=>response.json())
            .then(json=>{
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                this.setState({
                    loc: json.data.record || []
                }, ()=>{
                    this.getStatus();
                    this.tick = setInterval(this.runTick, 5000);
                })
            })
    }

    getStatus = () => {
        let {toggleLoading, showDialog} = this.props;
        fetch('/api/wristband/getstatus', getRequest())
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return showDialog(json.message);
                let record = json.data.record || [];
                let locs = this.state.loc;
                for(let i in locs){
                    locs[i].list = [];
                }
                for(let i in record) {
                    let tmp = record[i];
                    if(!tmp.locid) continue;
                    for(let j in locs) {
                        if(locs[j].serialnumber == tmp.locid) {
                            locs[j].list.push(tmp);
                        }
                    }
                }

                this.setState({
                    loc: locs
                })
            })
    }

    render() {

        return (
            <Container fluid>
                <Grid columns={3}>
                    {
                        this.state.loc.map((t,idx) => (
                            <Grid.Column key={idx} className="clearfix" >
                                <Header as="h5" content={t.name} />
                                <Segment style={{height: '400px', overflow: 'auto'}}>
                                    <List>
                                        {
                                            t.list ? 
                                            t.list.map((tt, idx) => (
                                                <List.Item key={idx}>
                                                    {
                                                        tt.name ? (
                                                            <Label basic color="blue" size="tiny" content={tt.name}/>
                                                        ) : null
                                                    }
                                                    <Label basic color="teal" size="tiny" content={tt.mac}/>
                                                </List.Item>
                                            )) 
                                            : null
                                        }
                                    </List>
                                </Segment>
                            </Grid.Column>
                        ))
                    }
                </Grid>
            </Container>
        )
    }
}

export default LocStatusWloc;