import React, {Component} from 'react';
import {ValidatorForm} from 'react-material-ui-form-validator';

import {Typography, Box, TextField} from '@material-ui/core';
import SaveIcon from '@material-ui/icons/Save';

import {ENDPOINT_ROOT} from '../api';
import {
    restController,
    RestControllerProps,
    RestFormLoader,
    FormActions,
    FormButton,
    SectionContent,
} from '../components';

import {SettingsState} from './types';

export const LIGHT_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "settings";

type LightStateRestControllerProps = RestControllerProps<SettingsState>;

class SettingsController extends Component<LightStateRestControllerProps> {

    componentDidMount() {
        this.props.loadData();
    }

    render() {
        return (
            <SectionContent title='Einstellungen' titleGutter>
                <RestFormLoader
                    {...this.props}
                    render={props => {
                        const {data, saveData, handleValueChange} = props;
                        return (
                            <ValidatorForm onSubmit={saveData}>
                                <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
                                    <Typography variant="body1">
                                        Die unten eingegebenen Werte werden nach klick des 'SAVE' Buttons übernommen und überleben einen Neustart.
                                    </Typography>
                                </Box>
                                <div>
                                    <TextField value={data.maxpumpduration} fullWidth={true} type='number'
                                               id="maxpumpduration" label="Maximale Pumpdauer [sec]"
                                               onChange={handleValueChange('maxpumpduration')}/>
                                </div>
                                <div>
                                    <TextField value={data.waterOutageWaitDuration} fullWidth={true} type='number'
                                               id="waterOutageWaitDuration" label="Wartezeit nach Wasserausfall [sec]"
                                               onChange={handleValueChange('waterOutageWaitDuration')}/>
                                </div>
                                <div>
                                    <TextField value={data.heatUp} fullWidth={true} type='number' id="heatUp"
                                               label="Obere Luftfeuchtigkeitsschwelle [%]"
                                               onChange={handleValueChange('heatUp')}/>
                                </div>
                                <div>
                                    <TextField value={data.heatLow} fullWidth={true} type='number' id="heatLow"
                                               label="Untere Luftfeuchtigkeitsschwelle [%]"
                                               onChange={handleValueChange('heatLow')}/>
                                </div>
                                <div>
                                    <TextField value={data.fanRuntime} fullWidth={true} type='number' id="fanRuntime"
                                               label="Nachlaufzeit Lüfter [sec]"
                                               onChange={handleValueChange('fanRuntime')}/>
                                </div>

                                <FormActions>
                                    <FormButton startIcon={<SaveIcon/>} variant="contained" color="primary"
                                                type="submit">Save
                                    </FormButton>
                                </FormActions>
                            </ValidatorForm>
                        )
                    }}
                />
            </SectionContent>
        )
    }

}

export default restController(LIGHT_SETTINGS_ENDPOINT, SettingsController);