import React from 'react';
import {Form, Input, Button, Label, Message} from 'semantic-ui-react';
import {getRequest} from '../../../actions';

class TimezoneForm extends React.Component {
    state = {
        zones: [],
        zone: '',
        loc: '',
        selZone: null,
        selLoc: null
    }

    componentDidMount(){
        this.getZones();
        this.getZoneSet();        
    }

    getZones = () => {
        fetch('/api/system/gettimezonelist', getRequest())
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return this.props.showDialog(json.message);
                this.setState({
                    zones: json.data.record || []
                })
            })
    }

    getZoneSet = () => {
        fetch('/api/system/gettimezoneset', getRequest())
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return this.props.showDialog(json.message);
                let tz = (json.data.record[0].value || '').split('/');
                this.setState({
                    zone: tz[0] || '',
                    loc: tz[1] || ''
                });
            })
    }

    zonesChange = (data) => {
        this.setState({
            selZone: data == '' ? null : data
        })
    }

    handleSubmit = () => {
        if(this.state.selZone == null || this.state.selLoc == null ) return this.props.showDialog('請選擇區域與城市');
        let zone = this.state.zones[this.state.selZone].name;
        let loc = this.state.zones[this.state.selZone].location[this.state.selLoc];

        fetch('/api/system/settimezone', getRequest({timezone: `${zone}/${loc}`}))
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return this.props.showDialog(json.message);
                this.setState({
                    selZone: null,
                    selLoc: null
                }, () => {
                    this.getZoneSet();
                })
            })
    }

    render(){
        return (
            <Form onSubmit={(e,d) => {
                    e.preventDefault();
                    this.handleSubmit();
                }} serializer={e=>{
                    return {};
                }}>
                <Form.Field inline>
                    {/*<Input label="系統Timezone" 
                        value={`${this.state.zone}${this.state.zone.length > 0 ? '/' : ''}${this.state.loc}`}
                        disabled />*/}
                    <label>系統Timezone</label>
                    <Label content={`${this.state.zone}${this.state.zone.length > 0 ? '/' : ''}${this.state.loc}`} basic/>
                </Form.Field>
                <Form.Group inline>
                    <Form.Field>
                        <label>設定Timezone</label>
                        <select value={this.state.selZone == null ? '' : this.state.selZone} onChange={e=>{ this.zonesChange(e.target.value); }}>
                            <option value="">選擇區域</option>
                            {
                                this.state.zones.map((t,idx)=>(
                                    <option key={idx} value={idx}>{t.name}</option>
                                ))
                            }
                        </select>
                    </Form.Field>
                    {
                        this.state.selZone == null ? null :
                        (
                            <Form.Field>
                                <select value={this.state.selLoc == null ? '' : this.state.selLoc} 
                                    onChange={e => { this.setState({selLoc: e.target.value == '' ? null : e.target.value}) }}>
                                    <option value="">選擇城市</option>
                                    {
                                        this.state.zones[this.state.selZone].location.map((t,idx) => (
                                            <option key={idx} value={idx}>{t}</option>
                                        ))
                                    }
                                </select>
                            </Form.Field>
                        )
                    }
                </Form.Group>
                <Button type="submit" fluid content="更新Timezone" />
            </Form>
        )
    }
}

export default TimezoneForm;