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

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

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

import { FanStatus } from './types';

export const FAN_STATUS_ENDPOINT = ENDPOINT_ROOT + "fanState";





type FanStatusRestControllerProps = RestControllerProps<FanStatus>;

class FanStatusRestController extends Component<FanStatusRestControllerProps> {

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

  render() {
    return (
      <SectionContent title='Fan Control Settings' titleGutter>
        <RestFormLoader
          {...this.props}
          render={props => (
            <FanStatusRestControllerForm {...props} />
          )}
        />
      </SectionContent>
    )
  }

}

export default restController(FAN_STATUS_ENDPOINT, FanStatusRestController);

type FanStatusRestControllerFormProps = RestFormProps<FanStatus>;

function FanStatusRestControllerForm(props: FanStatusRestControllerFormProps) {
  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">
          The form below allow you to define the fan behaviour depending of the temperature.
        </Typography>
      </Box>

      <BlockFormControlLabel
        control={
          <Checkbox
            checked={data.fan_status}
            onChange={handleValueChange('fan_status')}
            color="primary"
          />
        }
        label="Enable Fan"
      />

      <TextValidator
                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:100']}
                errorMessages={['Low Temperature required', "Must be a number", "Must be 0 or higher", "Max value is 100"]}
                name="temperature_thres_low"
                label="Low Temperature Threshold (fan start)"
                fullWidth
                variant="outlined"
                value={data.temperature_thres_low}
                type="number"
                onChange={handleValueChange('temperature_thres_low')}
                margin="normal"
      />
      <TextValidator
                validators={['required', 'isNumber', 'minNumber:30', 'maxNumber:200']}
                errorMessages={['High Temperature required', "Must be a number", "Must be 0 or higher", "Max value is 100"]}
                name="temperature_thres_high"
                label="High Temperature Threshold (fan max)"
                fullWidth
                variant="outlined"
                value={data.temperature_thres_high}
                type="number"
                onChange={handleValueChange('temperature_thres_high')}
                margin="normal"
      />

      <TextValidator
                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:40']}
                errorMessages={['Fan PWM pin is required', "Must be a number", "Must be 0 or higher", "Max value is 40"]}
                name="fan_pwm_gpio"
                label="Fan PWM GPIO pin"
                fullWidth
                variant="outlined"
                value={data.fan_pwm_gpio}
                type="number"
                onChange={handleValueChange('fan_pwm_gpio')}
                margin="normal"
      />
      <TextValidator
                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:40']}
                errorMessages={['Fan TACH pin is required', "Must be a number", "Must be 0 or higher", "Max value is 40"]}
                name="fan_tach_gpio"
                label="Fan TACH GPIO pin"
                fullWidth
                variant="outlined"
                value={data.fan_tach_gpio}
                type="number"
                onChange={handleValueChange('fan_tach_gpio')}
                margin="normal"
      />      
      <TextValidator
                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:40']}
                errorMessages={['Temp Sensor pin is required', "Must be a number", "Must be 0 or higher", "Max value is 40"]}
                name="oneWire_gpio"
                label="Sensor OneWire DS1820 gpio"
                fullWidth
                variant="outlined"
                value={data.oneWire_gpio}
                type="number"
                onChange={handleValueChange('oneWire_gpio')}
                margin="normal"
      />      

      <TextValidator
                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:100000']}
                errorMessages={['Fan MAX is required', "Must be a number", "Must be 0 or higher", "Max value is 1024"]}
                name="fan_max_speed"
                label="Fan Max RPM Speed"
                fullWidth
                variant="outlined"
                value={data.fan_max_speed}
                type="number"
                onChange={handleValueChange('fan_max_speed')}
                margin="normal"
      />


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