import React, {Component} from 'react';
import {Box, List, ListItem, ListItemText} from '@material-ui/core';
import {FormButton, restController, RestControllerProps, RestFormLoader, SectionContent} from '../components';
import {ENDPOINT_ROOT} from "../api";
import {GeneralInformaitonState} from "./types";
import RefreshIcon from "@material-ui/icons/Refresh";
import {getRealTimeString, stringifyTime} from "./Time";

// define api endpoint
export const GENERALINFORMATION_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "generalinfo";

type GeneralInformationRestControllerProps = RestControllerProps<GeneralInformaitonState>;

class GeneralInformation extends Component<GeneralInformationRestControllerProps> {
    componentDidMount() {
        this.props.loadData();
    }

    render() {
        return (
            <SectionContent title='Information' titleGutter>
                <RestFormLoader
                    {...this.props}
                    render={props => (
                        <>
                            <List>
                                <ListItem>
                                    <ListItemText
                                        primary="Chip läuft seit:"
                                        secondary={<>{stringifyTime(props.data.runtime)}
                                            <br/> {getRealTimeString(props.data.runtime)}</>}
                                    />
                                </ListItem>
                                <ListItem>
                                    <ListItemText
                                        primary="Zuletzt zu wenig Wasser:"
                                        secondary={props.data.lastWaterOutage !== 0 ?
                                            <>
                                                vor {stringifyTime(props.data.lastWaterOutage)}<br/>
                                                {getRealTimeString(props.data.lastWaterOutage)}
                                            </> : "noch nie!"}
                                    />
                                </ListItem>
                                <ListItem>
                                    <ListItemText
                                        primary="Letzer Pumpenzyklus"
                                        secondary={props.data.lastpumptime !== 0 ?
                                            <>
                                                vor {stringifyTime(props.data.lastpumptime)}<br/>
                                                {getRealTimeString(props.data.lastpumptime)}
                                            </> : "noch nie!"}
                                    />
                                </ListItem>
                                <ListItem>
                                    <ListItemText
                                        primary="Letze Pumpdauer:"
                                        secondary={props.data.lastPumpDuration !== 0 ? stringifyTime(props.data.lastPumpDuration) : "-"}
                                    />
                                </ListItem>
                                <ListItem>
                                    <ListItemText
                                        primary="WasserSensor / DruckSensor"
                                        secondary={(props.data.watersensor ? "EIN" : "AUS!") + " / " + (props.data.pressuresensor ? "EIN" : "AUS")}
                                    />
                                </ListItem>
                            </List>
                            <Box display="flex" flexWrap="wrap">
                                <Box flexGrow={1} padding={1}>
                                    <FormButton startIcon={<RefreshIcon/>} variant="contained" color="secondary"
                                                onClick={this.props.loadData}>
                                        Refresh
                                    </FormButton>
                                </Box>
                                <Box flexWrap="none" padding={1} whiteSpace="nowrap">
                                    Version: {props.data.version}
                                </Box>
                            </Box>
                        </>
                    )}
                />
            </SectionContent>
        );
    }
}

export default restController(GENERALINFORMATION_SETTINGS_ENDPOINT, GeneralInformation);