import React from 'react';
import { Modal, Form, Input, Button, Checkbox, Grid } from 'semantic-ui-react';

const WristbandModal = ({ i18n, open, type, data, closeModal, submitModal }) => {

    return (
        <Modal open={open}>
            <Modal.Header content={type == 1 ? '修改資料' : '新增資料'} />
            <Modal.Content>
                <Form onSubmit={(e,d)=>{
                        e.preventDefault();
                        submitModal(type, d.formData);
                    }} serializer={e => {
                        let json = {
                            name: '',
                            identity: '',
                            monitor: 0,
                            notify: 0,
                            id: type == 1 ? data.uid : '',
                            mac: ''
                        };

                        let mac = e.querySelector('input[name="mac"]');
                        if(mac && 'value' in mac) json.mac = mac.value;
                        let name = e.querySelector('input[name="name"]');
                        if(name && 'value' in name) json.name = name.value;
                        let identity = e.querySelector('input[name="identity"]');
                        if(identity && 'value' in identity) json.identity = identity.value;
                        let monitor = e.querySelector('input[name="monitor"]');
                        if(monitor && 'checked' in monitor) json.monitor = monitor.checked ? 1 : 0;
                        let notify = e.querySelector('input[name="notify"]');
                        if(notify && 'checked' in notify) json.notify = notify.checked ? 1 : 0;

                        return json;
                    }}>
                    <Form.Field>
                        <Input label="手環ID" name="mac" defaultValue={data.mac} disabled={type == 1} />
                    </Form.Field>
                    <Form.Field>
                        <Input label="名稱" name="name" defaultValue={data.name} />
                    </Form.Field>
                    <Form.Field>
                        <Input label="身份" name="identity" defaultValue={data.identity} />
                    </Form.Field>
                    <Form.Field>
                        <Checkbox label="監控" name="monitor" defaultChecked={data.monitor == 1} />
                    </Form.Field>
                    <Form.Field>
                        <Checkbox label="通知" name="notify" defaultChecked={data.notify == 1} />
                    </Form.Field>
                    <Form.Field>
                        <Checkbox label="啟用" name="switch" defaultChecked={data.switch == 1} />
                    </Form.Field>
                    <Grid columns={2}>
                        <Grid.Column>
                            <Button content="送出" fluid type="submit" />
                        </Grid.Column>
                        <Grid.Column>
                            <Button content="取消" fluid type="button" onClick={()=>{ closeModal() }} />
                        </Grid.Column>
                    </Grid>
                </Form>
            </Modal.Content>
        </Modal>
    )
}
export default WristbandModal;