import React from 'react';
import {Grid, Container, Segment, Menu, List} from 'semantic-ui-react';
import LocStatus from '../../../containers/AdminPage/Wristband/LocStatus';
import WristbandInfo from '../../../containers/AdminPage/Wristband/WristbandInfo';

class WristbandPage extends React.Component{
    state = {
        page: ''
    }

    changePage = (page) => {
        this.setState({
            page
        })
    }

    getRenderPage = () => {
        let {i18n} = this.props;
        switch(this.state.page) {
            case 'locstatus':
                return <LocStatus/>;
            case 'wristband':
                return <WristbandInfo />
            default:
                return null;
        }
    }

    render(){
        let {i18n} = this.props;
        return (
            <Container fluid style={{paddingLeft: '10px', paddingRight: '10px'}}>
                <Grid>
                    <Grid.Column width={4}>
                        <Menu vertical={true} fluid>
                            <Menu.Item>
                                <Menu.Header>主選單</Menu.Header>
                                <Menu.Menu>
                                    <Menu.Item active={this.state.page == 'wristband'} onClick={()=>{this.changePage('wristband')}}>
                                        手環名稱設定
                                    </Menu.Item>
                                    <Menu.Item active={this.state.page == 'locstatus'} onClick={()=>{ this.changePage('locstatus'); }}>
                                        位置資訊
                                    </Menu.Item>
                                </Menu.Menu>
                            </Menu.Item>
                        </Menu>
                    </Grid.Column>
                    <Grid.Column width={12}>
                        {this.getRenderPage()}
                    </Grid.Column>
                </Grid>
            </Container>
        )
    }
}

export default WristbandPage;