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

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

class Location extends React.Component {

    state = {
        ...stateDefault()
    }

    componentDidMount() {
        this.getList();
    }

    getList = () => {
        let {showDialog, toggleLoading} = 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({
                    list: json.data.record || []
                })
            })
    }

    openModal = (type, data = {}) =>{
        this.setState({
            modal: {
                open: true, 
                type, 
                data
            }
        })
    }
    closeModal = () => {
        this.setState({
            modal:{
                ...stateDefault().modal
            }
        })
    }
    submitModal = (type, data) => {
        let {showDialog} = this.props;
        if(type == 1 && !data.id) return showDialog('資料取得失敗');
        if(type == 0 && !data.sn) return showDialog('請填寫裝置序號');

        let url = type == 1 ? '/api/wristband/editlocation' : '/api/wristband/addlocation';
        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();
                })
            })
    }

    delLocation = (id) => {
        if(!id) return ;
        let {showDialog, callConfirm} = this.props;
        callConfirm('確定要刪除這筆定位點資料?', ()=>{
            fetch('/api/wristband/dellocation', getRequest({id}))
                .then(response => response.json())
                .then(json => {
                    if(json.status != 1) return showDialog(json.message);
                    this.getList();
                })
        })
    }

    render() {
        let {i18n} = this.props;    
        return (
            <Container fluid>
                <Segment className="clearfix">
                    <Button floated="right" basic color="green" style={{marginBottom: '15px'}} content="新增" icon="plus" onClick={()=>{this.openModal(0)}} />
                    <Table>
                        <Table.Header>
                            <Table.Row>
                                <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}
                                        delLocation={this.delLocation}
                                        editLocation={this.openModal} />
                                ))
                            }
                        </Table.Body>
                    </Table>
                </Segment>
                <LocationModal
                    i18n={i18n}
                    open={this.state.modal.open}
                    type={this.state.modal.type}
                    data={this.state.modal.data}
                    closeModal={this.closeModal}
                    submitModal={this.submitModal} />
            </Container>
        )
    }
}

export default Location;