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

const stateDefault = ()=>({
        list: [],
        modal: {
            open: false,
            type: 0,
            data: {}
        },
        pathinfo: {
            open: false,
            mac: '',
            name: ''
        }
    })

class WristbandInfo extends React.Component {
    state = {
        ...stateDefault()
    }

    componentDidMount(){
        this.getList();
    }

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

    delWristband = (id) => {
        if(!id) return ;

        fetch('/api/wristband/delwristband', getRequest({id}))
            .then(response=>response.json())
            .then(json=>{
                if(json.status!=1) return showDialog(json.message);
                this.getList();
            })
    }

    openModal = (type, data = {}) => {
        this.setState({
            modal: {
                type, 
                data, 
                open: true
            }
        })
    }

    closeModal = () => {
        this.setState({
            modal: {
                ...stateDefault().modal
            }
        })
    }

    submitModal = (type, data = {}) => {
        let {showDialog, toggleLoading} = this.props;
        if(type == 1 && !data.id) return showDialog('資料取得失敗');
        if(type == 0 && !data.mac) return showDialog('請填寫手環ID');

        let url = type == 1 ? '/api/wristband/editwristband' : '/api/wristband/addwristband';

        fetch(url, getRequest(data))
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return showDialog(json.message);
                this.setState({
                    modal: {...stateDefault().modal}
                }, ()=>{
                    this.getList();
                })
            })
    }

    showPathInfo = (mac, name) => {
        if(!mac) return ;
        this.setState({
            pathinfo:{
                open: true,
                mac,
                name
            }
        })
    }
    closePathInfo = () => {
        this.setState({
            pathinfo: {
                ...stateDefault().pathinfo
            }
        })
    }

    render() {
        let { i18n } = this.props;
        return (
            <Container fluid>
                <Segment className="clearfix">
                    <Button basic color="green" icon="plus" content="新增" floated="right" onClick={()=>{this.openModal(0)}} style={{marginBottom: '15px'}} />
                    <Table>
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell>操作</Table.HeaderCell>
                                <Table.HeaderCell>手環ID</Table.HeaderCell>
                                <Table.HeaderCell>手環名稱</Table.HeaderCell>
                                <Table.HeaderCell>身份</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} data={t} i18n={i18n} delWristband={this.delWristband} editWristband={this.openModal} showPathInfo={this.showPathInfo}/>
                                ))
                            }
                        </Table.Body>
                    </Table>
                </Segment>
                <WristbandModal i18n={i18n}
                    open={this.state.modal.open}
                    type={this.state.modal.type}
                    data={this.state.modal.data}
                    closeModal={this.closeModal}
                    submitModal={this.submitModal} />
                <WristbandPathInfo i18n={i18n}
                    open={this.state.pathinfo.open} 
                    mac={this.state.pathinfo.mac}
                    wbname={this.state.pathinfo.name}
                    closeModal={this.closePathInfo}
                    showDialog={this.props.showDialog}
                    getRequest={getRequest} />
            </Container>
        )
    }
}

export default WristbandInfo;