class ViewController: UIViewController {

	let colors: [UIColor] = [
		.systemRed, .systemGreen, .systemBlue,
		.systemPink, .systemYellow, .systemTeal,
	]

	var collectionView: UICollectionView!
	
	override func viewDidLoad() {
		super.viewDidLoad()
		
		view.backgroundColor = .white
		
		let scrollView: UIScrollView = {
			let v = UIScrollView()
			return v
		}()
		let topView: UILabel = {
			let v = UILabel()
			v.text = "Top View"
			v.textAlignment = .center
			v.backgroundColor = .cyan
			return v
		}()
		let bottomStackView: UIStackView = {
			let v = UIStackView()
			v.axis = .vertical
			v.spacing = 20.0
			return v
		}()
		
		// let's add 5 views to the stack view
		for i in 1...5 {
			let v = UILabel()
			v.text = "Bottom View \(i)"
			v.textAlignment = .center
			v.backgroundColor = .yellow
			v.heightAnchor.constraint(equalToConstant: 75.0).isActive = true
			bottomStackView.addArrangedSubview(v)
		}
		
		let cvFlowLayout = UICollectionViewFlowLayout()
		cvFlowLayout.scrollDirection = .horizontal
		cvFlowLayout.itemSize = CGSize(width: 100, height: 80)
		
		let collectionView: UICollectionView = UICollectionView(frame: .zero, collectionViewLayout: cvFlowLayout)
		
		scrollView.translatesAutoresizingMaskIntoConstraints = false
		collectionView.translatesAutoresizingMaskIntoConstraints = false
		topView.translatesAutoresizingMaskIntoConstraints = false
		bottomStackView.translatesAutoresizingMaskIntoConstraints = false

		scrollView.addSubview(topView)
		scrollView.addSubview(collectionView)
		scrollView.addSubview(bottomStackView)
		view.addSubview(scrollView)
		
		let g = view.safeAreaLayoutGuide
		let lg = scrollView.contentLayoutGuide
		let fg = scrollView.frameLayoutGuide
		
		NSLayoutConstraint.activate([
			
			scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
			scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
			scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
			scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),

			topView.topAnchor.constraint(equalTo: lg.topAnchor, constant: 40.0),
			topView.leadingAnchor.constraint(equalTo: lg.leadingAnchor, constant: 20.0),
			topView.trailingAnchor.constraint(equalTo: lg.trailingAnchor, constant: -20.0),
			topView.heightAnchor.constraint(equalToConstant: 200.0),
			
			topView.widthAnchor.constraint(equalTo: fg.widthAnchor, constant: -40.0),

			collectionView.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 80.0),
			collectionView.widthAnchor.constraint(equalTo: topView.widthAnchor),
			collectionView.centerXAnchor.constraint(equalTo: topView.centerXAnchor),
			collectionView.heightAnchor.constraint(equalToConstant: 100.0),
			
			collectionView.widthAnchor.constraint(equalTo: topView.widthAnchor),
			
			bottomStackView.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 80.0),
			bottomStackView.widthAnchor.constraint(equalTo: topView.widthAnchor),
			bottomStackView.centerXAnchor.constraint(equalTo: topView.centerXAnchor),

			bottomStackView.bottomAnchor.constraint(equalTo: lg.bottomAnchor, constant: -40.0),
			
		])
		
		collectionView.dataSource = self
		collectionView.delegate = self
		
		collectionView.register(MyCell.self, forCellWithReuseIdentifier: "c")
	
		scrollView.backgroundColor = .blue
		collectionView.backgroundColor = .lightGray
	}


}

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
	
	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
		return 20
	}
	
	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
		let c = collectionView.dequeueReusableCell(withReuseIdentifier: "c", for: indexPath) as! MyCell
		c.contentView.backgroundColor = colors[indexPath.item % colors.count]
		c.label.text = "\(indexPath.item)"
		return c
	}

}

class MyCell: UICollectionViewCell {
	let label: UILabel = {
		let v = UILabel()
		v.translatesAutoresizingMaskIntoConstraints = false
		v.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
		return v
	}()
	
	override init(frame: CGRect) {
		super.init(frame: frame)
		commonInit()
	}
	required init?(coder: NSCoder) {
		super.init(coder: coder)
		commonInit()
	}
	func commonInit() -> Void {
		contentView.addSubview(label)
		NSLayoutConstraint.activate([
			label.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
			label.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
		])
	}
}