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

const char *ssid = "mkHome_2.4Ghz";          // Set up WiFi account
const char *password = "mk800130";    // Set WiFi password

#define GREEN_LED_PIN 13  // Define the green LED control pin
#define YELLOW_LED_PIN 11 // Define the yellow LED control pin
#define RED_LED_PIN 10    // Define the red LED control pin

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

// A function to handle the root path
void handleRoot(AsyncWebServerRequest *request) {
  request->send(200, "text/html", getIndexHtml());
}

// A function to handle slider requests
void handleSlider(AsyncWebServerRequest *request) {
  
  if (request->hasParam("red")) {
    int redValue = request->getParam("red")->value().toInt();
    ledcWrite(0, redValue);     // Set the red LED brightness
  }
  if (request->hasParam("yellow")) {
    int yellowValue = request->getParam("yellow")->value().toInt();
    ledcWrite(1, yellowValue);  // Set the yellow LED brightness
  }
  if (request->hasParam("green")) {
    int greenValue = request->getParam("green")->value().toInt();
    ledcWrite(2, greenValue);   // Set the green LED brightness
  }
  request->send(200, "text/plain", "OK");
}

// Generates the HTML code for the web page
String getIndexHtml() {
  String html = "<!DOCTYPE html>";
  html += "<html><head><title>ESP32 Web controls LED</title>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css'>";
  html += "<style>";
  html += "input[type=range] { width: 80%; }";
  html += ".led-icon { font-size: 24px; margin-right: 10px; }";
  html += "</style>";
  html += "</head><body style='text-align:center;'>";
  html += "<h2>ESP32 Web Control</h2>";
 
  html += "<p><i class='fas fa-lightbulb led-icon' style='color:#66CC33;'></i> Green:</p>";
  html += "<input type='range' min='0' max='255' value='0' id='green' onchange='changeSlider(this.value, \"green\")' style='background-color: green;'><br>";

  html += "<p><i class='fas fa-lightbulb led-icon' style='color:#FFCC33;'></i> Yellow:</p>";
  html += "<input type='range' min='0' max='255' value='0' id='yellow' onchange='changeSlider(this.value, \"yellow\")' style='background-color: yellow;'><br>";

  html += "<p><i class='fas fa-lightbulb led-icon' style='color:#FF0000;'></i> Red:</p>";
  html += "<input type='range' min='0' max='255' value='0' id='red' onchange='changeSlider(this.value, \"red\")' style='background-color: red;'><br>";

  html += "<script>";
  html += "function changeSlider(value, led) { var xhttp = new XMLHttpRequest(); xhttp.open('GET', '/slider?' + led + '=' + value, true); xhttp.send(); }";
  html += "</script></body></html>";

  return html;
}

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

  ledcSetup(0, 5000, 8);  // 8-bit resolution, 5000Hz frequency
  ledcSetup(1, 5000, 8);
  ledcSetup(2, 5000, 8);

  ledcAttachPin(RED_LED_PIN, 0);    // Red LED
  ledcAttachPin(YELLOW_LED_PIN, 1); // Yellow LED
  ledcAttachPin(GREEN_LED_PIN, 2);  // Green LED

  // Setting up WiFi connection
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to the WiFi network");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP()); // Printing IP addresses

  // Set up the request handler function
  server.on("/", HTTP_GET, handleRoot);
  server.on("/slider", HTTP_GET, handleSlider);
  server.begin();// Starting the server
}

void loop() {
  // AsyncWebServer 
}
