/* esp32 by espressif system 라이브러리 필요 v 2.0.17 빌드 가능 */

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

const char *ssid = "mkHome_2.4Ghz"; // Enter the WiFi account to which your ESP32 will connect
const char *password = "mk800130";  //Set WiFi password

const int greenLEDPin = 13;   // Green LED control pin
const int yellowLEDPin = 11;  // Yellow LED control pin
const int redLEDPin = 10;     // Red LED control pin

int greenLEDState = LOW;   // Green LED initial state (off)
int yellowLEDState = LOW;  // Yellow LED initial state (off)
int redLEDState = LOW;     // Red LED initial state (off)

// Create an AsyncWebServer object
AsyncWebServer server(80);

// Generates the HTML code for the web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 LED Control</h2>
  <p>
    <i id="greenLED" class="fas fa-lightbulb" style="color:#808080;" onclick="toggleLED('green');"></i> 
    <span class="dht-labels" id="ledText1">LED Off</span>
  </p>
  <p>
    <i id="yellowLED" class="fas fa-lightbulb" style="color:#808080;" onclick="toggleLED('yellow');"></i> 
    <span class="dht-labels" id="ledText2">LED Off</span>
  </p>
  <p>
    <i id="redLED" class="fas fa-lightbulb" style="color:#808080;" onclick="toggleLED('red');"></i> 
    <span class="dht-labels" id="ledText3">LED Off</span>
  </p>
</body>
<script>
function toggleLED(color) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "/toggle?color=" + color, true);
  xhttp.send();
}

function updateIcon(led, color) {
  var icon = document.getElementById(led);
  icon.style.color = color;
}

setInterval(function() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var ledState = JSON.parse(this.responseText);
      updateIcon("greenLED", ledState.greenColor);
      document.getElementById("ledText1").innerHTML = ledState.greenText;
      updateIcon("yellowLED", ledState.yellowColor);
      document.getElementById("ledText2").innerHTML = ledState.yellowText;
      updateIcon("redLED", ledState.redColor);
      document.getElementById("ledText3").innerHTML = ledState.redText;
    }
  };
  xhttp.open("GET", "/ledstate", true);
  xhttp.send();
}, 1000);
</script>
</html>
)rawliteral";

String getLEDState() {
  String json;
  json += "{\"greenColor\":\"" + String(greenLEDState == HIGH ? "#66CC33" : "#808080") + "\",";   
  json += "\"yellowColor\":\"" + String(yellowLEDState == HIGH ? "#FFCC33" : "#808080") + "\",";  
  json += "\"redColor\":\"" + String(redLEDState == HIGH ? "#FF0000" : "#808080") + "\",";        
  json += "\"greenText\":\"" + String(greenLEDState == HIGH ? "LED ON" : "LED OFF") + "\",";      
  json += "\"yellowText\":\"" + String(yellowLEDState == HIGH ? "LED ON" : "LED OFF") + "\",";    
  json += "\"redText\":\"" + String(redLEDState == HIGH ? "LED ON" : "LED OFF") + "\"}"; 
  return json;
}

void setup() {
  Serial.begin(9600);  // Set the serial port baud rate

  //Set the pin output mode
  pinMode(greenLEDPin, OUTPUT);
  pinMode(yellowLEDPin, OUTPUT);
  pinMode(redLEDPin, OUTPUT);

  //Set the state of the LED
  digitalWrite(greenLEDPin, greenLEDState);
  digitalWrite(yellowLEDPin, yellowLEDState);
  digitalWrite(redLEDPin, redLEDState);

  // Setting up WiFi connection
  WiFi.begin(ssid, password);
  Serial.println("WiFi Setting");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println(".");
  }
  // Printing IP addresses
  Serial.println(WiFi.localIP());

  // Set up the request handler function
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/html", index_html);
  });
  server.on("/toggle", HTTP_GET, [](AsyncWebServerRequest *request) {
    String color = request->getParam("color")->value();
    if (color == "green") {
      greenLEDState = !greenLEDState;
      digitalWrite(greenLEDPin, greenLEDState);
    } else if (color == "yellow") {
      yellowLEDState = !yellowLEDState;
      digitalWrite(yellowLEDPin, yellowLEDState);
    } else if (color == "red") {
      redLEDState = !redLEDState;
      digitalWrite(redLEDPin, redLEDState);
    }
    request->send(200, "application/json", getLEDState());
  });
  server.on("/ledstate", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(200, "application/json", getLEDState());
  });

  // Starting the server
  server.begin();
}

void loop() {
  // AsyncWebServer
}
