// // TiletViewController.swift // VDSSample // // Created by Matt Bruce on 12/19/22. // import Foundation import UIKit import VDS import VDSColorTokens import Combine class TileletViewController: BaseViewController { lazy var titleTextStylePickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: Tilelet.TitleModel.TextStyle.allCases.sorted{ $0.rawValue < $1.rawValue }) }() lazy var otherTextStylePickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: Tilelet.SubTitleModel.TextStyle.allCases.sorted{ $0.rawValue < $1.rawValue }) }() lazy var subtitleColorPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: [.primary, .secondary]) }() var clickableSwitch = Toggle() var titleTextField = TextField() var subTitleTextField = TextField() var widthTextField = NumericField() var heightTextField = NumericField() var textPercentageTextField = NumericField() var textWidthTextField = NumericField() var showDescriptionIconSwitch = Toggle() var showDirectionalIconSwitch = Toggle() var badgeTextField = TextField() var tilelet = Tilelet() override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: .makeWrapper(for: tilelet)) setupForm() setupPicker() setupModel() } override func allTextFields() -> [TextField]? { [titleTextField, subTitleTextField, widthTextField, heightTextField, textWidthTextField, textPercentageTextField, badgeTextField] } func setupForm(){ addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Clickable", view: .makeWrapper(for: clickableSwitch)) addFormRow(label: "Title Style", view: titleTextStylePickerSelectorView) addFormRow(label: "Other Style", view: otherTextStylePickerSelectorView) addFormRow(label: "Title Text", view: titleTextField) addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView) addFormRow(label: "Subtitle Text", view: subTitleTextField) addFormRow(label: "Width", view: widthTextField) //addFormRow(label: "Height", view: heightTextField) addFormRow(label: "Text Width", view: textWidthTextField) addFormRow(label: "Text Percentage", view: textPercentageTextField) addFormRow(label: "Badge Text", view: badgeTextField) addFormRow(label: "Description Icon", view: .makeWrapper(for: showDescriptionIconSwitch)) addFormRow(label: "Directional Icon", view: .makeWrapper(for: showDirectionalIconSwitch)) clickableSwitch.onChange = { [weak self] sender in guard let tilelet = self?.tilelet else { return } if sender.isOn { tilelet.onClick = { t in print("you click on me!") } } else { tilelet.onClick = nil } } widthTextField .textPublisher .sink { [weak self] text in if let n = NumberFormatter().number(from: text) { self?.tilelet.width = CGFloat(truncating: n) } }.store(in: &subscribers) heightTextField .textPublisher .sink { [weak self] text in if let n = NumberFormatter().number(from: text) { self?.tilelet.height = CGFloat(truncating: n) } else { self?.tilelet.height = nil } }.store(in: &subscribers) textWidthTextField .textPublisher .sink { [weak self] text in guard let self else { return } if let n = NumberFormatter().number(from: text), n.floatValue > 50.0 { self.tilelet.textWidth = CGFloat(truncating: n) self.textPercentageTextField.text = "" } else { self.tilelet.textWidth = nil } }.store(in: &subscribers) textPercentageTextField .textPublisher .sink { [weak self] text in if let n = NumberFormatter().number(from: text), n.intValue > 15 && n.intValue <= 100 { self?.tilelet.textPercentage = CGFloat(truncating: n) self?.textWidthTextField.text = "" } else { self?.tilelet.textPercentage = nil } }.store(in: &subscribers) titleTextField .textPublisher .sink { [weak self] text in self?.setTitleModel() }.store(in: &subscribers) subTitleTextField .textPublisher .sink { [weak self] text in self?.setSubTitleModel() }.store(in: &subscribers) badgeTextField .textPublisher .sink { [weak self] text in self?.setBadgeModel() }.store(in: &subscribers) showDescriptionIconSwitch.onChange = { [weak self] sender in if sender.isOn { self?.showDirectionalIconSwitch.isOn = false self?.tilelet.descriptiveIconModel = .init(size: .medium, surface: .dark) } else { self?.tilelet.descriptiveIconModel = nil } } showDirectionalIconSwitch.onChange = { [weak self] sender in if sender.isOn { self?.showDescriptionIconSwitch.isOn = false self?.tilelet.directionalIconModel = .init(size: .medium, surface: .dark) } else { self?.tilelet.directionalIconModel = nil } } } func setupModel() { let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.") let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.") tilelet.surface = .light tilelet.titleModel = titleModel tilelet.subTitleModel = subTitleModel //setup UI surfacePickerSelectorView.text = tilelet.surface.rawValue otherTextStylePickerSelectorView.text = subTitleModel.textStyle.rawValue titleTextStylePickerSelectorView.text = titleModel.textStyle.rawValue subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue titleTextField.text = titleModel.text subTitleTextField.text = subTitleModel.text widthTextField.text = tilelet.width != nil ? "\(tilelet.width!)" : "" } //sub models func setBadgeModel() { if let text = badgeTextField.text, !text.isEmpty { tilelet.badgeModel = Tilelet.BadgeModel(text: text) } else { tilelet.badgeModel = nil } } func setTitleModel() { if let text = titleTextField.text, !text.isEmpty { tilelet.titleModel = Tilelet.TitleModel(text: text, textStyle: titleTextStylePickerSelectorView.selectedItem) } else { tilelet.titleModel = nil } } func setSubTitleModel() { if let text = subTitleTextField.text, !text.isEmpty { tilelet.subTitleModel = Tilelet.SubTitleModel(text: text, textStyle: otherTextStylePickerSelectorView.selectedItem) } else { tilelet.subTitleModel = nil } } //Picker func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.tilelet.surface = item self?.contentTopView.backgroundColor = item.color } titleTextStylePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setTitleModel() } otherTextStylePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setSubTitleModel() } subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setSubTitleModel() } } }