#lang racket/gui

(define frame (new frame%
                   [label "Pixel Pixel Pixel Pixel Pixel Pixel"]
                   [width 600]
                   [height 600]))

(define cell-size 20)
(define selected-color "black")

;; Create a set of predefined colors
(define colors '("black" "white" "red" "green" "blue" "yellow" "purple" "orange"))

(define my-canvas%
  (class canvas%
    (super-new)
    (inherit get-dc get-width get-height)
    
    (define/override (on-paint)
      (define dc (get-dc))
      (define canvas-width (get-width))
      (define canvas-height (get-height))
      (define grid-width (quotient canvas-width cell-size))
      (define grid-height (quotient canvas-height cell-size))
      (define grid (make-vector grid-width (make-vector grid-height "")))
      
      ;; Draw the stored colors
      (for ([x (in-range grid-width)]
            [y (in-range grid-height)])
        (let ([color (vector-ref (vector-ref grid x) y)])
          (when (not (string=? color ""))
            (send dc draw-rectangle (* x cell-size) (* y cell-size) cell-size cell-size)))))
    
    (define/override (on-event event)
      (define canvas-width (get-width))
      (define canvas-height (get-height))
      (define grid-width (quotient canvas-width cell-size))
      (define grid-height (quotient canvas-height cell-size))
      
      (when (send event button-down?)
        (let ([x (quotient (send event get-x) cell-size)]
              [y (quotient (send event get-y) cell-size)])
          (when (and (< x grid-width) (< y grid-height))
            (define grid (make-vector grid-width (make-vector grid-height "")))
            (vector-set! (vector-ref grid x) y selected-color)
            (send (get-dc) set-brush selected-color 'solid)
            (send (get-dc) draw-rectangle (* x cell-size) (* y cell-size) cell-size cell-size)))))))

(define canvas (new my-canvas% [parent frame]))

;; Layout the UI components
(define main-panel (new vertical-panel% [parent frame]))

;; Add a horizontal panel to hold the canvas and color picker
(define canvas-panel (new horizontal-panel%
                          [parent main-panel]
                          [stretchable-width #t]
                          [stretchable-height #t]))

;; Add the canvas to the canvas panel
(new my-canvas% [parent canvas-panel]
                [min-width 600]
                [min-height 600])

(define color-panel (new horizontal-panel%
                         [parent main-panel]
                         [alignment '(right top)]))

(new choice% [parent color-panel]
             [label "Pick Color: "]
             [choices colors]
             [callback (lambda (choice event)
                         (set! selected-color (send choice get-string-selection)))])

(send frame show #t)