import React, { Component } from 'react';
import {
    Grid,
    Divider,
    Image,
    Modal,
    Button,
  } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { RemoteService } from '../remote';
import SimulationPanelSlider from './SimulationPanelSlider.js';

/*
const SimulationPanel = (props) => (
  <Modal
    isOpen={!!props.simulationPanel}
    contentLabel="Simulation Panel"
    onRequestClose={props.closeSimulationPanel}
    // style={ReactModalPortal,ReactModal__Overlay, modal}
    style={{
        overlay: {
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0,0,0,0.5)',
        },
        content: {
          position: 'absolute',
          top: '40px',
          left: '40px',
          right: '40px',
          bottom: '40px',
          border: '1px solid #ccc',
          background: '#fff',
          overflow: 'auto',
          WebkitOverflowScrolling: 'touch',
          borderRadius: '4px',
          outline: 'none',
          padding: '20px',
          backgroundColor: 'rgb(65, 67, 69)',
        },
      }}
  >
    {props.simulationPanel}
    <Grid celled>

      {/* TITLE }
      <Grid.Row textAlign="center">
        <h1 style={{ color: 'white', padding: '1rem', fontFamily: 'Arial' }}>
        Welcome in the Simulation Panel
        </h1>
      </Grid.Row>

      {/* TEMPERATURE SENSOR }
      <Grid.Row>
        <Grid.Column width={6} textAlign="center">
          <Divider
            style={{
          marginTop: '3rem',
          marginBottom: 'auto',
      }}
          />
          <Image
            src="./../img/thermo-simulation.png"
            style={{
                width: '60px',
                height: 'auto',
                display: 'block',
                marginLeft: 'auto',
                marginRight: 'auto',
                marginTop: '1rem',
                marginBottom: '1rem',
            }}
          />
          <p style={{ color: 'white', padding: '0.5rem' }}>
            Temperature Sensor
          </p>
          <Divider />
        </Grid.Column>


        <Grid.Column width={10} textAlign="center">

          <div
            style={{
                display: 'block',
                marginLeft: '30%',
            }}
          >
            <SimulationPanelSlider />
          </div>
          <Divider />
          <div
            style={{
              display: 'block',
              marginLeft: '30%',
          }}
          >
            <SimulationPanelSlider />
          </div>
        </Grid.Column>
      </Grid.Row>

      {/*  HUMIDTY SENSOR }
      <Grid.Row>
        <Grid.Column width={6} textAlign="center">
          <Divider
            style={{
          marginTop: '3rem',
          marginBottom: 'auto',
      }}
          />
          <Image
            src="./../img/humidity-simulation.png"
            style={{
                width: '60px',
                height: 'auto',
                display: 'block',
                marginLeft: 'auto',
                marginRight: 'auto',
                marginTop: '1rem',
                marginBottom: '1rem',
            }}
          />
          <p style={{ color: 'white', padding: '0.5rem' }}>
            Humidity Sensor
          </p>
          <Divider />
        </Grid.Column>


        <Grid.Column width={10} textAlign="center">

          <div
            style={{
                display: 'block',
                marginLeft: '30%',
            }}
          >
            <SimulationPanelSlider />
          </div>
          <Divider />
          <div
            style={{
              display: 'block',
              marginLeft: '30%',
          }}
          >
            <SimulationPanelSlider />
          </div>
        </Grid.Column>
      </Grid.Row>

      {/*  LIGHT SENSOR }
      <Grid.Row>
        <Grid.Column width={6} textAlign="center">
          <Divider
            style={{
          marginTop: '3rem',
          marginBottom: 'auto',
      }}
          />
          <Image
            src="./../img/light-simulation.png"
            style={{
                width: '60px',
                height: 'auto',
                display: 'block',
                marginLeft: 'auto',
                marginRight: 'auto',
                marginTop: '1rem',
                marginBottom: '1rem',
            }}
          />
          <p style={{ color: 'white', padding: '0.5rem' }}>
            Light Sensor
          </p>
          <Divider />
        </Grid.Column>


        <Grid.Column width={10} textAlign="center">

          <div
            style={{
                display: 'block',
                marginLeft: '30%',
            }}
          >
            <SimulationPanelSlider />
          </div>
          <Divider />
          <div
            style={{
              display: 'block',
              marginLeft: '30%',
          }}
          >
            <SimulationPanelSlider />
          </div>
        </Grid.Column>
      </Grid.Row>

      {/*  MOTION SENSOR }
      <Grid.Row>
        <Grid.Column width={6} textAlign="center">
          <Divider
            style={{
          marginTop: '3rem',
          marginBottom: 'auto',
      }}
          />
          <Image
            src="./../img/motion-simulation.png"
            style={{
                width: '60px',
                height: 'auto',
                display: 'block',
                marginLeft: 'auto',
                marginRight: 'auto',
                marginTop: '1rem',
                marginBottom: '1rem',
            }}
          />
          <p style={{ color: 'white', padding: '0.5rem' }}>
           Motion Sensor
          </p>
          <Divider />
        </Grid.Column>


        <Grid.Column width={10} textAlign="center">

          <div
            style={{
                display: 'block',
                marginLeft: '30%',
            }}
          >
            <SimulationPanelSlider />
          </div>
          <Divider />
          <div
            style={{
              display: 'block',
              marginLeft: '30%',
          }}
          >
            <SimulationPanelSlider />
          </div>
        </Grid.Column>
      </Grid.Row>


    </Grid>
  </Modal>
);
*/
class SimulationPanel extends Component {
  constructor(props) {
      super(props);
      console.log(this.props.devices);
      this.state = {
        value: null,
        error: null,
      };
      this.updateSliderValues = this.updateSliderValues.bind(this);
      this.saveChanges = this.saveChanges.bind(this);
  }

  updateSliderValues(type, data, motion) {
    console.log(data, motion);
    this.setState({
      [type ? 'error' : 'value']: parseInt(data),
    });
  }

  saveChanges(device) {
    console.log(this.state);
    const { value } = this.state;
    const { error } = this.state;
    if (device.kind === 'sensor') {
      this.props
        .updateSimulation(
          { ...device, typical: value, err: error },
        )
        .catch((err) => console.error('Simulation panel update error', err));
    } else {
      const val = device.kind === 'motionSensor' ? 'detected' : 'typical';
      this.props
        .saveDevice(
          { ...device, [val]: value, err: error },
          null,
        )
        .catch((err) => console.error('Simulation panel update error', err));
    }
  }

  renderImage(device) {
    let image = './../img/';
    switch (device.kind) {
      case 'thermostat':
        image += 'thermo-simulation.png';
        break;
      case 'motionSensor':
        image += 'motion-simulation.png';
        break;
      case 'sensor':
        if (device.sensorType === 'TEMPERATURE') {
          image += 'thermo-simulation.png';
        } else if (device.sensorType === 'HUMIDITY') {
          image += 'humidity-simulation.png';
        } else {
          image += 'light-simulation.png';
        }
        break;
      default:
        break;
    }

    return (
      <Image
        src={image}
        style={{
                  width: '60px',
                  height: 'auto',
                  display: 'block',
                  marginLeft: 'auto',
                  marginRight: 'auto',
                  marginTop: '1rem',
                  marginBottom: '1rem',
              }}
      />
);
  }

  render() {
    return (
      <Modal
        closeIcon
        open={!!this.props.simulationPanel}
        onClose={this.props.closeSimulationPanel}
      >
        <Grid celled>
          <Grid.Row textAlign="center">
            <h1 style={{ padding: '1rem', fontFamily: 'Arial' }}>
              Welcome in the Simulation Panel
            </h1>
          </Grid.Row>
          {
            this.props.devices
            ? this.props.devices.map((d, i) => (
              <Grid.Row key={i}>
                <Grid.Column width={6} textAlign="center">
                  {this.renderImage(d)}
                  <p style={{ padding: '0.5rem' }}>
                    {d.name}
                  </p>
                  <Divider />
                  <Button
                    color="green"
                    id={d.id}
                    onClick={(e, { id }) => this.saveChanges(d, id)}
                  >
                    Save
                  </Button>
                </Grid.Column>


                <Grid.Column width={10} textAlign="center">

                  <div
                    style={{
                        display: 'block',
                        marginLeft: '30%',
                    }}
                  >
                    <SimulationPanelSlider update={this.updateSliderValues} error={false} device={d} id={d.id} />
                  </div>
                  {
                    d.kind === 'motionSensor'
                    ? null
                    : (
                      <>
                        <Divider />
                        <div
                          style={{
                          display: 'block',
                          marginLeft: '30%',
                      }}
                        >
                          <SimulationPanelSlider update={this.updateSliderValues} error device={d} id={d.id} />
                        </div>
                      </>
)
                  }
                </Grid.Column>
              </Grid.Row>
            ))
            : null
          }
        </Grid>

      </Modal>
    );
  }
}

const mapStateToProps = (state, _) => ({
  get devices() {
      const deviceInternalSensor = {
          thermostat: 'Thermostat',
          sensor: 'Sensor',
          motionSensor: 'Sensor',
        };
      const deviceArray = [
      ...Object.values(state.devices),
      ].filter((e) => e.kind in deviceInternalSensor);
      return deviceArray;
  },
});
const SimulationPanelContainer = connect(
mapStateToProps,
RemoteService,
)(SimulationPanel);
export default SimulationPanelContainer;