// // TileletGroupViewController.swift // VDSSample // // Created by Matt Bruce on 10/8/24. // import Foundation import UIKit import VDS import VDSCoreTokens class TileletGroupViewController: BaseViewController { var collectionView: UICollectionView! public enum RowQuantity: String, CaseIterable { case none, one, two, three, four init(quantity: Int){ if quantity == 1 { self = .one } else if quantity == 2 { self = .two } else if quantity == 3 { self = .three } else if quantity == 4 { self = .four } else { self = .none } } var intValue: Int { switch self { case .none: return 0 case .one: return 1 case .two: return 2 case .three: return 3 case .four: return 4 } } } lazy var rowQuantitySelectorView = { PickerSelectorView(title: "", picker: self.picker, items: RowQuantity.allCases) }() var disabledSwitch = Toggle() var widthTextField = NumericField() override func viewDidLoad() { super.viewDidLoad() component.tilelets = [ makeTilelet(badge: "Here's the badge", title: "Title goes here"), makeTilelet(eyebrow: "Here's the eyebrow", title: "Title goes here"), makeTilelet(title: "Title goes here", subTitle: "Here's the subTitle"), makeTilelet(eyebrow: "Here's the eyebrow", subTitle: "Here's the subTitle"), makeTilelet(badge: "Here's the badge", eyebrow: "Here's the eyebrow", title: "Title goes here"), makeTilelet(badge: "Here's the badge", title: "Title goes here", subTitle: "Here's the subTitle"), makeTilelet(badge: "Here's the badge", subTitle: "Here's the subTitle") ] addContentTopView(view: component) widthTextField.placeholder = "Active RowQty == none" setupPicker() setupModel() debugViewSwitch.onChange = { [weak self] sender in self?.component.debugBorder(show: sender.isOn, color: .blue) } } func makeTilelet(badge: String? = nil, eyebrow: String? = nil, title: String? = nil, subTitle: String? = nil) -> Tilelet { var badgeModel: Tilelet.BadgeModel? if let badge { badgeModel = Tilelet.BadgeModel(text: badge) } var eyebrowModel: Tilelet.EyebrowModel? if let eyebrow { eyebrowModel = Tilelet.EyebrowModel(text: eyebrow) } var titleModel: Tilelet.TitleModel? if let title { titleModel = Tilelet.TitleModel(text: title) } var subTitleModel: Tilelet.SubTitleModel? if let subTitle { subTitleModel = Tilelet.SubTitleModel(text: subTitle) } return .init().with { $0.surface = .light $0.badgeModel = badgeModel $0.eyebrowModel = eyebrowModel $0.titleModel = titleModel $0.subTitleModel = subTitleModel } } override func setupForm(){ super.setupForm() addActionRow() addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false) addFormRow(label: "Width", view: widthTextField) addFormRow(label: "Row Quantity", view: rowQuantitySelectorView) disabledSwitch.onChange = { [weak self] sender in self?.component.isEnabled = !sender.isOn } widthTextField .numberPublisher .sink { [weak self] number in if let number { // self?.component.childWidth = .value(number.cgFloatValue) } }.store(in: &subscribers) } func setupModel() { //setup UI surfacePickerSelectorView.text = component.surface.rawValue disabledSwitch.isOn = !component.isEnabled rowQuantitySelectorView.text = RowQuantity(quantity: component.rowQuantity).rawValue widthTextField.text = "" } func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.surface = item self?.contentTopView.backgroundColor = item.color } rowQuantitySelectorView.onPickerDidSelect = { [weak self] item in self?.widthTextField.isEnabled = item.intValue == 0 if item != .none { self?.widthTextField.text = "" //self?.component.childWidth = nil } if UIDevice.isIPad { self?.component.rowQuantityTablet = item.intValue } else { self?.component.rowQuantityPhone = item.intValue } } } } // //extension ButtoGroupViewController: ComponentSampleable { // static func makeSample() -> ComponentSample { // let component = Self.makeComponent() // let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")} // component.buttons = [ // Button().with{ $0.use = .secondary; $0.text = "Secondary"; $0.onClick = onClick}, // Button().with{ $0.use = .primary; $0.text = "Primary"; $0.onClick = onClick }, // TextLink().with { $0.size = .large; $0.text = "Large Text Link"; $0.onClick = onClick }, // TextLink().with { $0.text = "Widge Label Button"; $0.onClick = onClick }, // TextLinkCaret().with { $0.text = "Text Link Caret"; $0.onClick = onClick} // ] // // return ComponentSample(component: component) // } //}