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

const IPCamModal = ({ 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 = {};
                        
                        let name = e.querySelector('input[name="name"]');
                        if(name && 'value' in name) json.name = name.value;
                        let ip = e.querySelector('input[name="ip"]');
                        if(ip && 'value' in ip) json.ip = ip.value;
                        let model = e.querySelector('select[name="model"]');
                        if(model && 'value' in model) json.model = model.value;
                        let maxevents = e.querySelector('input[name="maxevents"]');
                        if(maxevents && 'value' in maxevents) json.maxevents = maxevents.value;
                        let maximg = e.querySelector('input[name="maximg"]');
                        if(maximg && 'value' in maximg) json.maximg = maximg.value;
                        let active = e.querySelector('input[type="checkbox"]');
                        if(active && 'checked' in active) json.active = active.checked;
                        if(type == 1) json.id = data.uid;

                        return json;
                    }}>
                    <Form.Field>
                        <Checkbox label="啟用裝置" defaultChecked={data.active == 1} name="active" />
                    </Form.Field>
                    <Form.Field>
                        <Input name="name" label="名稱" defaultValue={data.name} />
                    </Form.Field>
                    <Form.Field>
                        <Input name="ip" label="IP" defaultValue={data.ip} />
                    </Form.Field>
                    <Form.Field>
                        <select defaultValue={data.model} name="model">
                            <option value="">請選擇型號</option>
                            <option value="AXIS-M1124">AXIS-M1124</option>
                            <option value="GRANDSTREAM-GXV3610_HD">GRANDSTREAM-GXV3610_HD</option>
                        </select>
                    </Form.Field>
                    <Form.Field>
                        <Input name="maxevents" label="最大儲存事件數量(1-10)" defaultValue={data.maxevents} />
                    </Form.Field>
                    <Form.Field>
                        <Input name="maximg" label="最大儲存圖片數量(1-20)" defaultValue={data.maximg} />
                    </Form.Field>
                    <Grid columns={2}>
                        <Grid.Column>
                            <Button type="submit" fluid content="送出" />
                        </Grid.Column>
                        <Grid.Column>
                            <Button type="button" fluid content="取消" onClick={()=>{closeModal()}} />
                        </Grid.Column>
                    </Grid>
                </Form>
            </Modal.Content>
        </Modal>
    )
}

export default IPCamModal;