// the main change to fix your issue...
//
// on zoom, we change the Width constraint of the Left Container View - based on the zoomScale
//   so it always matches the Width of the Left Scroll View frame
//
// made some other changes to try and help...
//   - changed object / var names for consistency (makes it easier to keep track of things)
//   - modified a few constraints - some were not needed
//   - re-organized some of the code for readability
//   - disabled .bouncesZoom for a better visual

import UIKit

class PianoViewController: UIViewController, UIScrollViewDelegate {
	
	let rightScrollView = UIScrollView()
	let rightPianoRollView = PianoRollView()

	let leftScrollView = UIScrollView()
	let leftPianoRollView = PianoRollViewl()

	let rightContainerView = UIView()
	let leftContainerView = UIView()
	
	// we will modify the left container width constraint when zooming
	//	so it always fills the left scroll view width
	// let's define the left container / subviews / scroll view width here
	let leftContainerWidth: CGFloat = 50
	var leftContainerWidthConstraint: NSLayoutConstraint!

	override func viewDidLoad() {
		super.viewDidLoad()
		
		view.backgroundColor = UIColor.black
		
		// buttons will go under the PianoRollView
		let rightButtonsView = UIView()
		
		let leftButtonsView = UIView()
		
		// Add the UIScrollView to the view controller's view
		view.addSubview(rightScrollView)
		view.addSubview(leftScrollView)
		
		// Set the container view as the content view of the scroll view
		rightScrollView.addSubview(rightContainerView)
		leftScrollView.addSubview(leftContainerView)
		
		// add buttons views amd pianoRoll views to container views
		rightContainerView.addSubview(rightButtonsView)
		rightContainerView.addSubview(rightPianoRollView)
		
		leftContainerView.addSubview(leftButtonsView)
		leftContainerView.addSubview(leftPianoRollView)
		
		// we will use auto-layout on all views
		
		rightScrollView.translatesAutoresizingMaskIntoConstraints = false
		leftScrollView.translatesAutoresizingMaskIntoConstraints = false
		leftContainerView.translatesAutoresizingMaskIntoConstraints = false
		leftButtonsView.translatesAutoresizingMaskIntoConstraints = false
		leftPianoRollView.translatesAutoresizingMaskIntoConstraints = false
		rightContainerView.translatesAutoresizingMaskIntoConstraints = false
		rightButtonsView.translatesAutoresizingMaskIntoConstraints = false
		rightPianoRollView.translatesAutoresizingMaskIntoConstraints = false
		
		// we (almost) always want to respect the safe area
		let safeG = view.safeAreaLayoutGuide
		
		// we want to constrain scrollView subviews to the scrollView's Content Layout Guide
		let contentG = rightScrollView.contentLayoutGuide
		let contentgleft = leftScrollView.contentLayoutGuide
		
		// left pianoRollView width
		// auto-layout often complains (generates "breaking constraints" messages to the debug console)
		//	when views get sized dynamically - this will avoid those warning messages
		// we will activate it below
		let leftPianoRollWidthConstraint = leftPianoRollView.widthAnchor.constraint(equalToConstant: leftContainerWidth)
		leftPianoRollWidthConstraint.priority = .required - 1

		// we will be modifying this constraint when zooming
		leftContainerWidthConstraint = leftContainerView.widthAnchor.constraint(equalToConstant: leftContainerWidth)

		NSLayoutConstraint.activate([
			
			leftScrollView.leadingAnchor.constraint(equalTo: safeG.leadingAnchor),
			leftScrollView.topAnchor.constraint(equalTo: safeG.topAnchor),
			leftScrollView.bottomAnchor.constraint(equalTo: safeG.bottomAnchor),
			leftScrollView.widthAnchor.constraint(equalToConstant: leftContainerWidth),

			rightScrollView.leadingAnchor.constraint(equalTo: leftScrollView.trailingAnchor),
			rightScrollView.trailingAnchor.constraint(equalTo: safeG.trailingAnchor),
			rightScrollView.topAnchor.constraint(equalTo: safeG.topAnchor),
			rightScrollView.bottomAnchor.constraint(equalTo: safeG.bottomAnchor),
			
			leftContainerView.leadingAnchor.constraint(equalTo: contentgleft.leadingAnchor),
			leftContainerView.topAnchor.constraint(equalTo: contentgleft.topAnchor),
			leftContainerView.bottomAnchor.constraint(equalTo: contentgleft.bottomAnchor),
			// leftContainerView does NOT need a trailing anchor
			
			// activate leftContainerWidthConstraint
			leftContainerWidthConstraint,
			
			leftPianoRollView.leadingAnchor.constraint(equalTo: leftContainerView.leadingAnchor),
			leftPianoRollView.trailingAnchor.constraint(equalTo: leftContainerView.trailingAnchor),
			leftPianoRollView.topAnchor.constraint(equalTo: leftContainerView.topAnchor),
			leftPianoRollView.bottomAnchor.constraint(equalTo: leftContainerView.bottomAnchor),

			// activate the leftPianoRollView width constraint we created above
			leftPianoRollWidthConstraint,

			leftButtonsView.leadingAnchor.constraint(equalTo: leftContainerView.leadingAnchor),
			leftButtonsView.trailingAnchor.constraint(equalTo: leftContainerView.trailingAnchor),
			leftButtonsView.topAnchor.constraint(equalTo: leftContainerView.topAnchor),
			leftButtonsView.bottomAnchor.constraint(equalTo: leftContainerView.bottomAnchor),
			
			// constrain containerView to Content Layout Guide
			//  this will define the "scrollable area"
			//  so we won't be setting .contentSize anywhere
			rightContainerView.leadingAnchor.constraint(equalTo: contentG.leadingAnchor),
			rightContainerView.trailingAnchor.constraint(equalTo: contentG.trailingAnchor),
			rightContainerView.topAnchor.constraint(equalTo: contentG.topAnchor),
			rightContainerView.bottomAnchor.constraint(equalTo: contentG.bottomAnchor),
			
			// constrain all 4 sides of buttonView to containerView
			rightButtonsView.leadingAnchor.constraint(equalTo: rightContainerView.leadingAnchor),
			rightButtonsView.trailingAnchor.constraint(equalTo: rightContainerView.trailingAnchor),
			rightButtonsView.topAnchor.constraint(equalTo: rightContainerView.topAnchor),
			rightButtonsView.bottomAnchor.constraint(equalTo: rightContainerView.bottomAnchor),
			
			// constrain all 4 sides of pianoRollView to containerView
			rightPianoRollView.leadingAnchor.constraint(equalTo: rightContainerView.leadingAnchor),
			rightPianoRollView.trailingAnchor.constraint(equalTo: rightContainerView.trailingAnchor),
			rightPianoRollView.topAnchor.constraint(equalTo: rightContainerView.topAnchor),
			rightPianoRollView.bottomAnchor.constraint(equalTo: rightContainerView.bottomAnchor),
			
			// pianoRollView width
			rightPianoRollView.widthAnchor.constraint(equalToConstant: 2000.0),
			
		])
		
		// calculate size of notes
		
		// let's get close to 2000
		
		// in this example, pianoRollView.numN is 127
		let targetHeight: CGFloat = 2000.0
		let floatNumN: CGFloat = CGFloat(rightPianoRollView.numN)
		
		let noteH1: CGFloat = floor(targetHeight / floatNumN)   // == 15.0
		let noteH2: CGFloat = ceil(targetHeight / floatNumN)    // == 16.0
		
		let totalHeight1: CGFloat = noteH1 * floatNumN          // == 1905
		let totalHeight2: CGFloat = noteH2 * floatNumN          // == 2032
		
		let diff1: CGFloat = abs(targetHeight - totalHeight1)   // == 95
		let diff2: CGFloat = abs(targetHeight - totalHeight2)   // == 32
		
		// if diff1 is less than diff2, use noteH1 else noteH2
		let noteHeight: CGFloat = diff1 < diff2 ? noteH1 : noteH2
		
		// noteHeight now equals 16
		
		// Add buttons to the leftButtonsView
		//  we can constrain them vertically to each other
		var leftpreviousButton: UIButton!
		for i in 0..<rightPianoRollView.numN {
			let button = UIButton()
			button.translatesAutoresizingMaskIntoConstraints = false
			leftButtonsView.addSubview(button)
			
			button.leadingAnchor.constraint(equalTo: leftButtonsView.leadingAnchor).isActive = true
			button.trailingAnchor.constraint(equalTo: leftButtonsView.trailingAnchor).isActive = true
			button.heightAnchor.constraint(equalToConstant: noteHeight).isActive = true
			
			if leftpreviousButton == nil {
				// constrain FIRST button to Top of buttonView
				button.topAnchor.constraint(equalTo: leftButtonsView.topAnchor).isActive = true
			} else {
				// constrain other buttons to Bottom of Previous Button
				button.topAnchor.constraint(equalTo: leftpreviousButton.bottomAnchor).isActive = true
			}
			
			// update previousButton to the current button
			leftpreviousButton = button
			
			button.setTitle("B\(i)", for: .normal)
			button.setTitleColor(.black, for: .normal)
			button.backgroundColor = .green
		}
		
		// constrain bottom of LAST button to bottom of buttonsView
		leftpreviousButton.bottomAnchor.constraint(equalTo: leftButtonsView.bottomAnchor).isActive = true
		
		// Add buttons to the buttonView
		//  we can constrain them vertically to each other
		var previousButton: UIButton!
		for i in 0..<rightPianoRollView.numN {
			let button = UIButton()
			button.translatesAutoresizingMaskIntoConstraints = false
			rightButtonsView.addSubview(button)
			
			button.leadingAnchor.constraint(equalTo: rightButtonsView.leadingAnchor).isActive = true
			button.trailingAnchor.constraint(equalTo: rightButtonsView.trailingAnchor).isActive = true
			button.heightAnchor.constraint(equalToConstant: noteHeight).isActive = true
			
			if previousButton == nil {
				// constrain FIRST button to Top of buttonView
				button.topAnchor.constraint(equalTo: rightButtonsView.topAnchor).isActive = true
			} else {
				// constrain other buttons to Bottom of Previous Button
				button.topAnchor.constraint(equalTo: previousButton.bottomAnchor).isActive = true
			}
			
			// update previousButton to the current button
			previousButton = button
			
			button.setTitle("Button \(i)", for: .normal)
			button.setTitleColor(.black, for: .normal)
			button.backgroundColor = .red
		}
		
		// constrain bottom of LAST button to bottom of buttonsView
		previousButton.bottomAnchor.constraint(equalTo: rightButtonsView.bottomAnchor).isActive = true
		
		
		rightPianoRollView.noteHeight = noteHeight
		leftPianoRollView.noteHeight = noteHeight
		
		// make sure left PianoRoll has the same .numN
		leftPianoRollView.numN = rightPianoRollView.numN
		
		// Set the background color of the piano roll view to clear
		leftPianoRollView.backgroundColor = UIColor.clear
		rightPianoRollView.backgroundColor = UIColor.clear
		leftButtonsView.backgroundColor = UIColor.purple
		
		// Set the delegate of the scroll view to self
		rightScrollView.delegate = self
		leftScrollView.delegate = self
		
		rightScrollView.maximumZoomScale = 5
		leftScrollView.maximumZoomScale = 5

		leftScrollView.showsHorizontalScrollIndicator = false
		// probably also want to not-show the vertical indicator
		//	because it just looks odd
		leftScrollView.showsVerticalScrollIndicator = false

		// for better visual result, disable zoom bouncing
		rightScrollView.bouncesZoom = false
		leftScrollView.bouncesZoom = false
		
		// during development, so we can see the scrollView framing
		rightScrollView.backgroundColor = UIColor.blue
		leftScrollView.backgroundColor = UIColor.orange
		
		leftContainerView.backgroundColor = UIColor.yellow

	}
	
	override func viewDidAppear(_ animated: Bool) {
		super.viewDidAppear(animated)
		
		let minZoomScale = rightScrollView.frame.height / rightPianoRollView.bounds.height
		rightScrollView.minimumZoomScale = minZoomScale
		leftScrollView.minimumZoomScale = minZoomScale
	}
	
	// Return the container view in the viewForZooming method
	func viewForZooming(in scrollView: UIScrollView) -> UIView? {
		return scrollView.subviews.first
	}
	
	// implement the UIScrollViewDelegate method for tracking the zoom scale
	func scrollViewDidZoom(_ scrollView: UIScrollView) {
		
		if scrollView == rightScrollView {

			// Adjust the content offset so that the content stays centered when zooming
			let horizontalInset = max(0, (scrollView.bounds.width - scrollView.contentSize.width) )
			let verticalInset = max(0, (scrollView.bounds.height - scrollView.contentSize.height) )
			scrollView.contentInset = UIEdgeInsets(top: verticalInset, left: horizontalInset, bottom: verticalInset, right: horizontalInset)
			
			leftScrollView.zoomScale = rightScrollView.zoomScale
			
		} else if scrollView == leftScrollView {

			rightScrollView.zoomScale = leftScrollView.zoomScale

		}

		// set leftContainer Width based on zoomScale so it always
		//	fits the leftScrollView Width
		leftContainerWidthConstraint.constant = leftContainerWidth / leftScrollView.zoomScale
		
	}
	
	// implement UIScrollViewDelegate method
	func scrollViewDidScroll(_ scrollView: UIScrollView) {
		if scrollView == self.rightScrollView {
			self.syncScrollView(self.leftScrollView, toScrollView: self.rightScrollView)
		}
		else if scrollView == self.leftScrollView {
			self.syncScrollView(self.rightScrollView, toScrollView: leftScrollView)
		}
	}
	
	func syncScrollView(_ scrollViewToScroll: UIScrollView, toScrollView scrolledView: UIScrollView) {
		scrollViewToScroll.contentOffset.y = scrolledView.contentOffset.y
	}
	
}

class PianoRollView: UIView {
	
	var noteHeight: CGFloat = 0
	var notes: [(note: Int, startTime: Double, duration: Double)] = []
	var numN = 22
	var numT = 4
	
	override func draw(_ rect: CGRect) {
		super.draw(rect)
		
		// Draw the  grid
		let context = UIGraphicsGetCurrentContext()
		context?.setStrokeColor(UIColor.black.cgColor)
		context?.setLineWidth(1.0)
		
		for i in 1..<numN {
			let y = CGFloat(i) * noteHeight
			context?.move(to: CGPoint(x: 0, y: y))
			context?.addLine(to: CGPoint(x: bounds.width, y: y))
		}
		
		let timeSlotWidth = bounds.width / CGFloat(numT)
		
		for i in 1..<numT {
			let x = CGFloat(i) * timeSlotWidth
			context?.move(to: CGPoint(x: x, y: 0))
			context?.addLine(to: CGPoint(x: x, y: bounds.height))
		}
		
		// Add line to right of grid
		context?.move(to: CGPoint(x: bounds.width, y: 0))
		context?.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
		// Add line to left of grid
		context?.move(to: CGPoint(x: 0, y: 0))
		context?.addLine(to: CGPoint(x: 0, y: bounds.height))
		
		
		// Add line to top of grid
		context?.move(to: CGPoint(x: 0, y: 0))
		context?.addLine(to: CGPoint(x: bounds.width, y: 0))
		
		// Draw bottom line
		context?.move(to: CGPoint(x: 0, y: bounds.height))
		context?.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
		
		context?.strokePath()
	}
	
}

class PianoRollViewl: UIView {
	
	var noteHeight: CGFloat = 0
	
	var numN = 22
	var numT = 4
	
	override func draw(_ rect: CGRect) {
		super.draw(rect)
		
		// Draw the  grid
		let context = UIGraphicsGetCurrentContext()
		context?.setStrokeColor(UIColor.black.cgColor)
		context?.setLineWidth(1.0)
		
		// UIKit *may* tell us to draw only PART of the view
		//  (the rect), so use bounds instead of rect
		
		// noteHeight will be set by the controller
		//  when it calculates the button heights
		// let noteHeight = rect.height / CGFloat(numN)
		
		for i in 1..<numN {
			let y = CGFloat(i) * noteHeight
			context?.move(to: CGPoint(x: 0, y: y))
			context?.addLine(to: CGPoint(x: bounds.width, y: y))
		}
		
		context?.strokePath()
	}
	
}