import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { Platform, Text, View, Image, Switch, ImageBackground } from 'react-native';
import Slider from '@react-native-community/slider';
import styles from './styles/main'

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      api_set_endpoint: 'http://192.168.1.73:5555/setlight',
      api_get_endpoint: 'http://192.168.1.73:5555/getlight',
      todo: 'todo',
      toggleValue: false,
      prevToggleValue: false,
      bSliderValue: 35,
      cSliderValue: 100,
      prevbSliderValue: 0,
      prevcSliderValue: 0
    }

  }


  onScreenLoad = () => {
    fetch(this.state.api_get_endpoint, {
      method: 'POST'
    })
      .then((response) => response.json())
      .then((json) => {
        led_status = json.led_array
        state = this.state
        state.toggleValue = led_status.power
        state.bSliderValue = led_status.brightness
        state.cSliderValue = led_status.color
        this.setState({state})
      })
      .catch((error) => {
        console.log(error);
      });
  }

  toggleToggleState() {
    this.toggleValue = !this.toggleValue
  }

  UNSAFE_componentWillMount() {
    this.onScreenLoad()
  }

  componentDidMount() {
    this.interval = setInterval(() => this.stateUpdater(), 100);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  postUpdate() {
    fetch(this.state.api_set_endpoint, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        state: this.state.toggleValue,
        brightness: this.state.bSliderValue,
        color: this.state.cSliderValue
      })
    })
      .then((response) => response.json())
      .then((json) => {
        console.log(json)
      })
      .catch((error) => {
        console.log(error);
      });
  }

  stateUpdater() {
    this.toggleUpdator()
    this.brightnessUpdater()
    this.colorUpdater()
  }

  toggleUpdator() {
    if (this.state.toggleValue != this.state.prevToggleValue) {
      this.state.prevToggleValue = this.state.toggleValue
      console.log(this.state.toggleValue)
      this.postUpdate()
    }
  }

  brightnessUpdater() {
    if (this.state.prevbSliderValue != this.state.bSliderValue) {
      this.state.prevbSliderValue = this.state.bSliderValue
      console.log(this.state.bSliderValue)
      this.postUpdate()
    }
  }

  colorUpdater() {
    if (this.state.prevcSliderValue != this.state.cSliderValue) {
      this.state.prevcSliderValue = this.state.cSliderValue
      console.log(this.state.cSliderValue)
      this.postUpdate()
    }
  }

  changeSlider(value) {
    this.setState(() => {
      return {
        value: parseFloat(value)
      };
    });
  }

  render() {
    const statusbar = (Platform.OS == 'ios') ? <View style={styles.statusbar}></View> : <View></View>
    const bSliderValue = this.state.bSliderValue
    const cSliderValue = this.state.cSliderValue
    return (
      <View style={styles.container}>
        {statusbar}
        <View style={styles.LedCtrlCell}>
          <View style={styles.cellRow1}>
            <View style={styles.cellRow1Left}>
              <Image
                source={require('./media/light.png')}
                style={styles.LedLogo}
              />
              <View style={styles.LedTextContainer}>
                <Text style={styles.LedTitle}>
                  Bed Underglow
              </Text>
                <Text style={styles.LedDesk}>
                  LED - 1
              </Text>
              </View>
            </View>
            <View style={styles.cellRow1Right}>
              <Switch
                onValueChange={(value) => this.setState({ toggleValue: value })}
                value={this.state.toggleValue}
              />
            </View>
          </View>
          <View style={styles.cellRow2}>
            <Image
              source={require('./media/lowb.png')}
              style={styles.brightnessLogo}
            />
            <Slider
              step={1}
              style={styles.bSlider}
              maximumValue={255}
              value={bSliderValue}
              onValueChange={(value) => this.setState({ bSliderValue: value })}
            />
            <Image
              source={require('./media/hib.png')}
              style={styles.brightnessLogo}
            />
          </View>
          <View style={styles.cellRow3}>
            <ImageBackground source={require('./media/rgb.png')} style={styles.rgb}>
              <Slider
                step={1}
                style={styles.cSlider}
                maximumValue={360}
                value={cSliderValue}
                onValueChange={(value) => this.setState({ cSliderValue: value })}
              />
            </ImageBackground>

          </View>
        </View>
      </View>
    )
  };
}