#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
#include <SPI.h>  // Include the SPI library

#define TFT_CS  10
#define TFT_DC    9

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

#define NUM_COLS 4
#define NUM_ROWS 2
#define DISPLAY_WIDTH  tft.width()
#define DISPLAY_HEIGHT tft.height()

#define BOX_SIZE 68

#define OUTLINE_COLOR ILI9341_GREEN
#define FILL_COLOR ILI9341_BLACK
#define TEXT_COLOR_1 ILI9341_WHITE  // Color for the letters
#define TEXT_COLOR_2 ILI9341_BLUE  // Color for the letters

#include <Arduino.h>

class Button {
public:
  String name;
  bool status;
  char key;
  
  // Constructor to initialize the object
  Button(const String& n, bool s, char k) : name(n), status(s), key(k) {}
  
  // Member function to toggle the button status
  void toggle() {
    status = !status;
  }
};

Button buttons[8] = {
  Button("BU1", false,"w"),
  Button("BU2", true,"w"),
  Button("BU3", false,"w"),
  Button("BU4", true,"w"),
  Button("BU5", false,"w"),
  Button("BU6", true,"w"),
  Button("BU7", false,"w"),
  Button("BU8", true,"w")
};

void setup() {

  SPI.begin();  // Initialize SPI communication
  tft.begin();
  tft.fillScreen(ILI9341_BLACK);
  tft.setRotation(3);  // Adjust rotation as needed  
  tft.setTextSize(2);  // Text size for letters
}

void loop() {
  int xOffset = 12;
  int yOffset = 40;

  // Draw 2 rows of 4 green boxes with letters 'A' to 'H'
  for (int row = 0; row < NUM_ROWS; row++) {
    for (int col = 0; col < NUM_COLS; col++) {
      int x = col * BOX_SIZE + (col * 10) + xOffset;
      int y = row * BOX_SIZE + (row * 40) + yOffset;
      int bIndex = (row * 4) + col;

      // Draw the outline
      tft.drawRect(x, y, BOX_SIZE, BOX_SIZE, OUTLINE_COLOR);

      // Fill the box with black
      tft.fillRect(x + 1, y + 1, BOX_SIZE - 2, BOX_SIZE - 2, FILL_COLOR);

      // Display function name
      tft.setTextColor(TEXT_COLOR_1);
      int fnX = x + 15;  // Center letter
      int fnY = y - 20;  // Position above the box
      tft.setCursor(fnX, fnY);
      tft.print(buttons[bIndex].name);

      // Display state      
      int stX = x + 15;  // Center letter
      int stY = y + 40;  // Position above the box
      tft.setCursor(stX, stY);

      // check value and display
      if(buttons[bIndex].status) {
        tft.setTextColor(TEXT_COLOR_2);
        stX=stX+8;
        tft.setCursor(stX, stY);
        tft.print("ON");
      }
      else
      {
        tft.setTextColor(TEXT_COLOR_1);
        tft.print("OFF");
      }
    }
  }

  while (1);  // Keep the display on, you can modify this for your needs
}