<section class="canvas">
  <!-- Our canvas will go inside this section -->
</section>

<section class="toolbox">
  <div class="canvas-tools">
    <h2>Canvas</h2>
  </div>

  <div class="painting-tools">
    <h2>Painting tools</h2>
  </div>

  <div class="styles-tools">
    <h2>Styles</h2>
  </div>

  <div class="background-tools">
    <h2>Background</h2>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<script src="paintbrushes.js"></script>
<script src="app.js"></script>

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&family=Nunito&display=swap');

body {
	margin: 0;
	overflow: hidden;
	background-color: #ffffff;

	font-family: Nunito, sans-serif;
	font-size: 14px;
	line-height: 1;
}

section {
	height: 100vh;
	position: fixed;
	top: 0;
}

section.toolbox {
	right: 0;
	width: 180px;
	overflow-y: scroll;

	background-color: white;
	border-left: 1px solid #545454;

	display: flex;
	flex-direction: column;
}

section.canvas {
	left: 0;
	width: calc(100vw - 180px);

	display: flex;
	justify-content: center;
	align-items: center;
}

section.toolbox > div {
	padding: 20px 16px 8px 16px;
	border-bottom: 1px solid #545454;
}

h2 {
	margin-bottom: 24px;

	font-family: Lexend Deca;
	font-size: 14px;
	text-transform: uppercase;
}

label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
}

label > * {
	margin-top: 8px;
}

input, button, select {
	font-size: 14px;
	font-family: Nunito, sans-serif;
	line-height: 1;

	width: 100%;
	height: 32px;
	margin-bottom: 12px;

	border: 1px solid #545454;
	border-radius: 4px;
	background-color: #f0f0f0;
}

input:hover, button:hover, select:hover {
	background-color: #dfdfdf;
}

input[type="range"] {
	height: 16px;
}

// set up all the global variables
const toolboxWidth = document.querySelector('section.toolbox').offsetWidth
let canvas = null
let bgColor = '#fbf8f3'
let selectedTool = 'pen'

let brushSelector = null

function setup() {
  setupToolbox()

  // set up the canvas
  canvas = createCanvas(windowWidth - toolboxWidth, windowHeight)
  canvas.parent(select('section.canvas'))
  background(bgColor)
}

function setupToolbox() {
  // set up paint style tools in the Styles category
  const paintStyles = select('section.toolbox div.styles-tools')
  setupBrushSelector(paintStyles)
}

function setupBrushSelector(parentTag) {
  // create the brush selector as a <select> tag
	brushSelector = createSelect()

  // make a label for the menu
  makeLabel(brushSelector, parentTag, 'Paintbrush style')

  // make an array of all the paintbrush function names
  const brushes = [
    'pen',
    'marker',
    'beads',
    'rainbowBeads',
    'wiggle',
    'toothpick',
    'fountainPen',
    'splatter',
    'sprayPaint',
  ]

  // add in all of the paintbrush function names as menu options
  brushes.forEach(function (brush) {
      brushSelector.option(brush)
  })

  // set initial value of the currently selected paintbrush
  selectedTool = brushSelector.value()

  // update the selected paintbrush if the user picks a different menu option
  brushSelector.changed(function () {
    selectedTool = brushSelector.value()
  })
}

function makeLabel(tag, parentTag, text) {
  const label = createElement('label', text)
  label.parent(parentTag)
  tag.parent(label)
}

function draw() {
	// check if mouse button is pressed and mouse is hovering over canvas section
  if (mouseIsPressed && mouseX <= windowWidth - toolboxWidth) {
    // draw on the canvas with the selected painting tool function
    window[selectedTool]()
  }
}