//
//  TiletViewController.swift
//  VDSSample
//
//  Created by Matt Bruce on 12/19/22.
//

import Foundation
import UIKit
import VDS
import VDSCoreTokens
import Combine

class TileletViewController: BaseViewController<Tilelet> {

    lazy var titleStandardStylePickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Tilelet.TitleModel.StandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
    }()
    
    lazy var otherStandardStylePickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Tilelet.SubTitleModel.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
    }()
    
    lazy var textPositionPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Tilelet.TextPosition.allCases.sorted{ $0.rawValue < $1.rawValue })
    }()
    
    lazy var paddingPickerSelectorView = {
        PickerSelectorView(title: "small",
                           picker: self.picker,
                           items: Tilelet.Padding.allCases)
    }()
    lazy var badgeFillColorPickerSelectorView = {
        PickerSelectorView(title: "red",
                           picker: self.picker,
                           items: Badge.FillColor.allCases)
    }()
    lazy var badgeNumberOfLinesPickerSelectorView = {
        PickerSelectorView(title: "one",
                           picker: self.picker,
                           items: BadgeViewController.NumberOfLines.allCases)
    }()
    lazy var scalingTypePickerSelectorView = {
        PickerSelectorView(title: "white",
                           picker: self.picker,
                           items: Tilelet.AspectRatio.allCases)
    }()
    lazy var imageFallbackColorPickerSelectorView = {
        SurfacePickerSelectorView(picker: self.picker)
    }()
    
    lazy var backgroundEffectSelectorView = {
        PickerSelectorView(title: "none",
                           picker: self.picker,
                           items: TileContainerViewController.BackgroundEffect.allCases)
    }()
    
    lazy var colorPicker: UIColorPickerViewController = {
        let picker = UIColorPickerViewController()
        picker.delegate = self
        return picker
    }()
    
    var colorPickerType: ColorPickerType = .custom
    enum ColorPickerType {
        case gradientColor1, gradientColor2
        case contentViewBackgroundColor, token, custom
    }
    
    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
            self?.colorPickerType = picker.pickerType
            self?.selectedColorTapped(picker)
        }
    }()
    
    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
            self?.colorPickerType = picker.pickerType
            self?.selectedColorTapped(picker)
        }
    }()
    
    var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
    var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
    lazy var backgroundColorPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: BackgroundColor.allCases)
        .with { $0.text = BackgroundColor.white.rawValue }
    }()
    
    lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
            self?.currentSurfaceColorType = .background
            self?.colorPickerType = picker.pickerType
            self?.selectedColorTapped(picker)
        }
    }()
    
    lazy var backgroundColorTokenColorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: UIColor.VDSColor.allCases)
        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
    }()

    
    lazy var textAlignmentPickerSelectorView = {
        PickerSelectorView(title: "left",
                           picker: self.picker,
                           items: TitleLockup.TextAlignment.allCases)
    }()
    
    /// titleLockup
    var currentSurfaceColorType: SurfaceColorType = .title
    enum SurfaceColorType {
        case background, eyebrow, title, subtitle, directionalIcon, descriptionIcon
    }
    
    enum TitleTextColor: String, CaseIterable {
        case primary, token, custom
    }
    
    enum TextColor: String, CaseIterable {
        case primary, secondary, token, custom
    }
    
    enum IconColor: String, CaseIterable {
        case `default`, token, custom
    }
    
    /// eyebrow
    var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
    var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
    lazy var eyebrowColorPickerSelectorView = {
        PickerSelectorView(title: "primary",
                           picker: self.picker,
                           items: TextColor.allCases)
    }()

    lazy var eyebrowTokenColorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: UIColor.VDSColor.allCases)
        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
    }()

    lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
            self?.currentSurfaceColorType = .eyebrow
            self?.colorPickerType = picker.pickerType
            self?.selectedColorTapped(picker)
        }
    }()
    
    /// title
    var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
    var titleColorFormStackView = FormSection().with { $0.isHidden = true }
    lazy var titleColorPickerSelectorView = {
        PickerSelectorView(title: "primary",
                           picker: self.picker,
                           items: TitleTextColor.allCases)
    }()
    lazy var titleTokenColorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: UIColor.VDSColor.allCases)
        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }

    }()

    lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
            self?.currentSurfaceColorType = .title
            self?.colorPickerType = picker.pickerType
            self?.selectedColorTapped(picker)
        }
    }()
    
    /// subtitle
    var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
    var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
    lazy var subtitleColorPickerSelectorView = {
        PickerSelectorView(title: "primary",
                           picker: self.picker,
                           items: TextColor.allCases)
    }()
    lazy var subtitleTokenColorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: UIColor.VDSColor.allCases)
        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
    }()

    lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
            self?.currentSurfaceColorType = .subtitle
            self?.colorPickerType = picker.pickerType
            self?.selectedColorTapped(picker)
        }
    }()

    var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
    var descriptionIconTokenFormStackView = FormSection().with { $0.isHidden = true }
    var descriptionIconColorFormStackView = FormSection().with { $0.isHidden = true }
    lazy var descriptionNamePickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
    }()
    
    lazy var descriptionIconSizePickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Icon.Size.allCases)
    }()

    lazy var descriptionIconColorPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: IconColor.allCases)
        .with { $0.text = IconColor.default.rawValue }
    }()

    lazy var descriptionIconTokenColorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: UIColor.VDSColor.allCases)
        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
    }()

    lazy var descriptionIconCustomColorView: ColorPickerView<ColorPickerType> = {
        return .init(with: ColorPickerType.custom) { [weak self] picker in
            self?.currentSurfaceColorType = .descriptionIcon
            self?.colorPickerType = picker.pickerType
            self?.selectedColorTapped(picker)
        }
    }()
        
    var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
    var directionalIconTokenFormStackView = FormSection().with { $0.isHidden = true }
    var directionalIconColorFormStackView = FormSection().with { $0.isHidden = true }

    lazy var directionalIconSizePickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Icon.Size.allCases)
    }()


    lazy var directionalIconColorPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: IconColor.allCases)
        .with { $0.text = IconColor.default.rawValue }
    }()

    lazy var directionalIconTokenColorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: UIColor.VDSColor.allCases)
        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
    }()

    lazy var directionalIconCustomColorView: ColorPickerView<ColorPickerType> = {
        return .init(with: ColorPickerType.custom) { [weak self] picker in
            self?.currentSurfaceColorType = .directionalIcon
            self?.colorPickerType = picker.pickerType
            self?.selectedColorTapped(picker)
        }
    }()
    
    lazy var directionIconPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Tilelet.DirectionalIcon.IconType.allCases.sorted{ $0.rawValue < $1.rawValue })
    }()

    lazy var directionIconSizePickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue })
    }()

    let backgroundImage = UIImage(named: "backgroundTest")!
    var clickableSwitch = Toggle()
    var eyebrowTextField = TextField()
    var titleTextField = TextField()
    var subTitleTextField = TextField()
    var widthTextField = NumericField()
    var heightTextField = NumericField()
    var textPercentageTextField = NumericField()
    var textWidthTextField = NumericField()
    var showBackgroundImageSwitch = Toggle()
    var showDescriptionIconSwitch = Toggle()
    var showDirectionalIconSwitch = Toggle()
    var badgeTextField = TextField()
    var eyebrowIsBold = Toggle().with { $0.isOn = true }
    var titleIsBold = Toggle().with { $0.isOn = true }
    var selectedGradient1Color: String?
    var selectedGradient2Color: String?
    var selectedGradientColorView: UIView?
    var showDropShadowSwitch = Toggle()
    var backgroundColor: BackgroundColor = .black
    var maxWidthTextField = NumericField()
    var isLinkSwitch = Toggle()
    var descriptionIconAccessibilityTextField = TextField()

    var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        addContentTopView(view: component, pinTrailing: false)
        setupPicker()
        setupModel()
    }
    
    override func setupForm(){
        super.setupForm()
        addFormRow(label: "Surface", view: surfacePickerSelectorView)
        addActionRow()
        addFormRow(label: "Is Link", view: isLinkSwitch, pinTrailing: false)
        addFormRow(label: "Clickable", view: clickableSwitch, pinTrailing: false)
                
        addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
        addFormRow(label: "Padding", view: paddingPickerSelectorView)
        addFormRow(label: "Width", view: widthTextField)
        addFormRow(label: "Height", view: heightTextField)
        addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
        addFormRow(label: "Text Width", view: textWidthTextField)
        addFormRow(label: "Text Percentage", view: textPercentageTextField)
        addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
        addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
        
        backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
        backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
        append(section: backgroundColorTokenFormStackView)
        append(section: backgroundColorFormStackView)

        
        addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
        addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
        addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
        addFormRow(label: "Background Effect", view: backgroundEffectSelectorView)
        //Gradient Section
        gradientColorsFormStackView.addFormRow(label: "Gradient Color1", view: gradientColorView1)
        gradientColorsFormStackView.addFormRow(label: "Gradient Color2", view: gradientColorView2)
        append(section: gradientColorsFormStackView)
        
        append(section: .init().with({
            $0.title = "Badge"
            $0.addFormRow(label: "Text", view: badgeTextField)
            $0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView)
            $0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
            $0.addFormRow(label: "Max Width", view: maxWidthTextField)
        }))

        append(section: .init().with({
            $0.title = "Eyebrow"
            $0.addFormRow(label: "Text Style", tooltip: .init(title: "Text Style", content: "Eyebrow and Subtitle will share the same textStyle."), view: otherStandardStylePickerSelectorView)
            $0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
            $0.addFormRow(label: "Text", view: eyebrowTextField)
            $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
        }))
        
        eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
        eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
        append(section: eyebrowTokenFormStackView)
        append(section: eyebrowColorFormStackView)

        append(section: .init().with({
            $0.title = "Title"
            $0.addFormRow(label: "Text Style", view: titleStandardStylePickerSelectorView)
            $0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
            $0.addFormRow(label: "Text", view: titleTextField)
            $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
        }))
        titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
        titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
        append(section: titleTokenFormStackView)
        append(section: titleColorFormStackView)

        append(section: .init().with({
            $0.title = "Subtitle"
            $0.addFormRow(label: "Text", view: subTitleTextField)
            $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
        }))
        subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
        subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
        append(section: subtitleTokenFormStackView)
        append(section: subtitleColorFormStackView)

        append(section: .init().with({
            $0.title = "Description Icon "
            $0.addFormRow(label: "Show", view: showDescriptionIconSwitch, pinTrailing: false)
        }))
        append(section: descriptionIconFormStackView)
        descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
        descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField)
        descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
        descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
        descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
        descriptionIconColorFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
        append(section: descriptionIconTokenFormStackView)
        append(section: descriptionIconColorFormStackView)

        
        append(section: .init().with({
            $0.title = "Directional Icon"
            $0.addFormRow(label: "Show", view: showDirectionalIconSwitch, pinTrailing: false)
        }))
        append(section: directionalIconFormStackView)
        directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
        directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
        directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
        directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
        directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView)
        append(section: directionalIconTokenFormStackView)
        append(section: directionalIconColorFormStackView)

        clickableSwitch.onChange = { [weak self] sender in
            guard let self else { return }
            if sender.isOn {
                self.component.onClickActionPublisher("Tilelet", label: actionLabel)
            } else {
                self.component.onClick = nil
            }
        }
        
        isLinkSwitch.onChange = { [weak self] sender in
            guard let self else { return }
            self.component.accessibilityTraits = sender.isOn ? .link : .button
        }
        
        heightTextField
            .numberPublisher
            .sink { [weak self] number in
                guard let self, let number = number?.cgFloatValue else {
                    self?.heightTextField.text = ""
                    return
                }
                if number >= 100 && number < self.view.frame.height * 0.65 {
                    self.component.height = number
                } else {
                    self.component.height = nil
                }
                if let val = heightTextField.text, val.count > 2, number < 100 {
                    heightTextField.text = ""
                }
            }.store(in: &subscribers)

        widthTextField
            .numberPublisher
            .sink { [weak self] number in
                guard let self, let number = number?.cgFloatValue else {
                    self?.widthTextField.text = ""
                    return
                }
                if number >= 100 && number < self.view.frame.width * 0.85 {
                    self.component.width = number
                } else {
                    self.component.width = nil
                }
                if let val = widthTextField.text, val.count > 2, number < 100 {
                    widthTextField.text = ""
                }
            }.store(in: &subscribers)
        
        textWidthTextField
            .numberPublisher
            .sink { [weak self] number in
                if let number  {
                    self?.component.textWidth = .value(number.cgFloatValue)
                    self?.textPercentageTextField.text = ""
                } else {
                    self?.component.textWidth = nil
                }
            }.store(in: &subscribers)
        
        textPercentageTextField
            .numberPublisher
            .sink { [weak self] number in
                if let number {
                    self?.component.textWidth = .percentage(number.cgFloatValue)
                    self?.textWidthTextField.text = ""
                } else {
                    self?.component.textWidth = 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
            guard let self else { return }
            self.setDescriptionIconForm()
        }
        
        descriptionIconAccessibilityTextField
            .textPublisher
            .sink { [weak self] text in
                self?.setDescriptiveIconModel()
            }.store(in: &subscribers)

        showDirectionalIconSwitch.onChange = { [weak self] sender in
            guard let self else { return }
            self.setDirectionalIconForm()
        }

        eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
            self?.setEyebrowModel()
        }.store(in: &subscribers)

        titleIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
            self?.setTitleModel()
        }.store(in: &subscribers)
        
        paddingPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.padding = item
        }
        
        eyebrowTextField.textPublisher
            .sink { [weak self] text in
                self?.setEyebrowModel()
            }.store(in: &subscribers)
        
        showBackgroundImageSwitch.onChange = { [weak self] sender in
            if let image = self?.backgroundImage, sender.isOn {
                self?.component.backgroundImage = image
            } else {
                self?.component.backgroundImage = nil
            }
        }
        
        showDropShadowSwitch.onChange =  { [weak self] sender in
            self?.component.showDropShadow = sender.isOn
        }
        
        imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.imageFallbackColor = item
        }
        
        maxWidthTextField
            .numberPublisher
            .sink { [weak self] number in
                guard let number else { return }
                self?.component.badgeModel?.maxWidth = number.cgFloatValue
            }.store(in: &subscribers)
    }
    
    func setIconColorForms() {
        setDirectionalIconColorForm()
        setDescriptionIconColorForm()
    }
    
    func setDescriptionIconForm() {
        let showForm = showDescriptionIconSwitch.isOn
        descriptionIconFormStackView.isHidden = !showForm
        directionalIconFormStackView.isHidden = true
        if showForm {
            showDirectionalIconSwitch.isOn = false
            setDescriptiveIconModel()
        } else {
            component.descriptiveIconModel = nil
        }
        setIconColorForms()
    }
    
    func setDirectionalIconForm() {
        let showForm = showDirectionalIconSwitch.isOn
        directionalIconFormStackView.isHidden = !showForm
        descriptionIconFormStackView.isHidden = true
        if showForm {
            showDescriptionIconSwitch.isOn = false
            setDirectionalIconModel()
        } else {
            component.directionalIconModel = nil
        }
        setIconColorForms()
    }
    
    func setDirectionalIconColorForm() {
        let selectedItem = directionalIconColorPickerSelectorView.selectedItem
        if showDirectionalIconSwitch.isOn && selectedItem != .default  {
            directionalIconTokenFormStackView.isHidden = selectedItem != .token
            directionalIconColorFormStackView.isHidden = selectedItem != .custom
        } else {
            directionalIconTokenFormStackView.isHidden = true
            directionalIconColorFormStackView.isHidden = true
        }
    }
    
    func setDescriptionIconColorForm() {
        let selectedItem = descriptionIconColorPickerSelectorView.selectedItem
        if showDescriptionIconSwitch.isOn && selectedItem != .default {
            descriptionIconTokenFormStackView.isHidden = selectedItem != .token
            descriptionIconColorFormStackView.isHidden = selectedItem != .custom
        } else {
            descriptionIconTokenFormStackView.isHidden = true
            descriptionIconColorFormStackView.isHidden = true
        }
    }
    
    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.")
        component.color = .black
        component.surface = .light
        component.titleModel = titleModel
        component.subTitleModel = subTitleModel
        component.padding = .small
        //setup UI
        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
        textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
        surfacePickerSelectorView.text = component.surface.rawValue
        otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
        titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
        titleTextField.text = titleModel.text
        subTitleTextField.text = subTitleModel.text
        widthTextField.text = component.width != nil ? "\(component.width!)" : ""
        textPositionPickerSelectorView.text = component.textPostion.rawValue
        scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
        updateOtherTextStyles()
        
        descriptionIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
        descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
        descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue

        directionalIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
        directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
        directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
    }
    
    //sub models
    func setBadgeModel() {
        if let text = badgeTextField.text, !text.isEmpty {
            component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
        } else {
            component.badgeModel = nil
        }
    }
    
    func setTitleModel() {
        if let text = titleTextField.text, !text.isEmpty {
            var textColor: TitleLockup.TitleTextColor
            switch titleColorPickerSelectorView.selectedItem {
            case .primary:
                textColor = .primary
            case .token:
                textColor = .token(titleTokenColorView.selectedItem)
            case .custom:
                if let color = titleCustomColorView.selectedColor {
                    textColor = .custom(color)
                } else {
                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                }
            }
            
            component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
        } else {
            component.titleModel = nil
        }
    }
    
    func setSubTitleModel() {
        if let text = subTitleTextField.text, !text.isEmpty {
            var textColor: TitleLockup.TextColor
            switch subtitleColorPickerSelectorView.selectedItem {
            case .primary:
                textColor = .primary
            case .secondary:
                textColor = .secondary
            case .token:
                textColor = .token(subtitleTokenColorView.selectedItem)
            case .custom:
                if let color = subtitleCustomColorView.selectedColor {
                    textColor = .custom(color)
                } else {
                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                }
            }

            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
        } else {
            component.subTitleModel = nil
        }
    }
    
    func setEyebrowModel() {
        if let text = eyebrowTextField.text, !text.isEmpty {
            var textColor: TitleLockup.TextColor
            switch eyebrowColorPickerSelectorView.selectedItem {
            case .primary:
                textColor = .primary
            case .secondary:
                textColor = .secondary
            case .token:
                textColor = .token(eyebrowTokenColorView.selectedItem)
            case .custom:
                if let color = eyebrowCustomColorView.selectedColor {
                    textColor = .custom(color)
                } else {
                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                }
            }
            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
        } else {
            component.eyebrowModel = nil
        }
    }
    
    func setDescriptiveIconModel() {
        let iconSize = descriptionIconSizePickerSelectorView.selectedItem
        let iconName = descriptionNamePickerSelectorView.selectedItem
        var iconColor: Tilelet.IconColor? = nil
        var accessibleText: String?
        if let at = descriptionIconAccessibilityTextField.text, !at.isEmpty {
            accessibleText = at
        }
        
        switch descriptionIconColorPickerSelectorView.selectedItem {
        case .token:
            iconColor = .token(descriptionIconTokenColorView.selectedItem)
        case .custom:
            iconColor = .custom(descriptionIconCustomColorView.selectedColor ?? .white)
        default:
            break
        }
        component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize, accessibleText: accessibleText ?? nil )
    }
    
    func setDirectionalIconModel() {
        let iconType = directionIconPickerSelectorView.selectedItem
        let iconSize = directionIconSizePickerSelectorView.selectedItem
        var iconColor: Tilelet.IconColor? = nil
        switch directionalIconColorPickerSelectorView.selectedItem {
        case .token:
            iconColor = .token(directionalIconTokenColorView.selectedItem)
        case .custom:
            iconColor = .custom(directionalIconCustomColorView.selectedColor ?? .white)
        default:
            break
        }
        component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
    }
    
    func updateOtherTextStyles() {
        let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles
        let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! }
        otherStandardStylePickerSelectorView.items = otheritems
        otherStandardStylePickerSelectorView.text = otheritems.first?.rawValue ?? ""
        setSubTitleModel()
    }
    
    //Picker
    func setupPicker(){
        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.surface = item
            self?.contentTopView.backgroundColor = item.color
        }
        
        titleStandardStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            guard let self else { return }
            self.setTitleModel()
            self.updateOtherTextStyles()
        }
        
        otherStandardStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.setSubTitleModel()
        }
        
        textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            guard let self else { return }
            self.component.textPostion = item
        }
        
        badgeFillColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.badgeModel?.fillColor = item
        }
        
        badgeNumberOfLinesPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.badgeModel?.numberOfLines = item.intValue
        }
        
        scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.aspectRatio = item
            self?.component.layoutIfNeeded()
            self?.showDebug(show: self?.debugViewSwitch.isOn ?? false)
        }
        
        backgroundEffectSelectorView.onPickerDidSelect = { [weak self] item in
            guard let self else { return }
            if let effect = item.effect {
                self.component.backgroundEffect = self.getTilelet(effect: effect)
                self.gradientColorsFormStackView.isHidden = true
                self.gradientColorView1.selectedColor = nil
                self.gradientColorView2.selectedColor = nil
            } else {
                self.colorPickerType = .gradientColor1
                self.gradientColorsFormStackView.isHidden = false
            }
        }
        
        textAlignmentPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.titleLockup.textAlignment = item
        }
        
        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            guard let self else { return }
            if let color = getTilelet(backgroundColor: item) {
                component.color = color
            } else {
                backgroundColorTokenFormStackView.isHidden = item != .token
                backgroundColorFormStackView.isHidden = item != .custom
            }
        }
        
        backgroundColorTokenColorView.onPickerDidSelect  = {  [weak self] item in
            self?.component.color = .token(item)
        }
                
        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.currentSurfaceColorType = .eyebrow
            self?.eyebrowTokenFormStackView.isHidden = item != .token
            self?.eyebrowColorFormStackView.isHidden = item != .custom
            self?.setEyebrowModel()
        }
        
        eyebrowTokenColorView.onPickerDidSelect  = {  [weak self] item in
            self?.setEyebrowModel()
        }

        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.currentSurfaceColorType = .title
            self?.titleTokenFormStackView.isHidden = item != .token
            self?.titleColorFormStackView.isHidden = item != .custom
            self?.setTitleModel()
        }
        
        titleTokenColorView.onPickerDidSelect  = {  [weak self] item in
            self?.setTitleModel()
        }
        
        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.currentSurfaceColorType = .subtitle
            self?.subtitleTokenFormStackView.isHidden = item != .token
            self?.subtitleColorFormStackView.isHidden = item != .custom
            self?.setSubTitleModel()
        }
        
        subtitleTokenColorView.onPickerDidSelect  = {  [weak self] item in
            self?.setSubTitleModel()
        }

        descriptionIconColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.setIconColorForms()
            self?.setDescriptiveIconModel()
        }
        
        descriptionNamePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.setDescriptiveIconModel()
        }
        
        descriptionIconSizePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.setDescriptiveIconModel()
        }
        
        descriptionIconTokenColorView.onPickerDidSelect = {  [weak self] item in
            self?.colorPickerType = .token
            self?.setDescriptiveIconModel()
        }
        
        directionalIconColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.setIconColorForms()
            self?.setDirectionalIconModel()
        }
        
        directionIconPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.setDirectionalIconModel()
        }
        
        directionIconSizePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
            self?.setDirectionalIconModel()
        }
        
        directionalIconTokenColorView.onPickerDidSelect = {  [weak self] item in
            self?.colorPickerType = .token
            self?.setDirectionalIconModel()
        }
    }
    
    func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
        switch effect {
        case .transparency:
            Tilelet.BackgroundEffect.transparency
        case .gradient(let firstColor, let secondColor):
            Tilelet.BackgroundEffect.gradient(firstColor, secondColor)
        default:
            Tilelet.BackgroundEffect.none
        }
    }
    
    func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor? {
        switch backgroundColor {
        case .primary:
                .primary
        case .secondary:
                .secondary
        case .white:
                .white
        case .black:
                .black
        case .custom:
                nil
        case .token:
                nil
        }
    }
}

extension TileletViewController: ComponentSampleable {
    static func makeSample() -> ComponentSample {
        let component = Self.makeComponent()
        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.")
        
        component.surface = .light
        component.titleModel = titleModel
        component.subTitleModel = subTitleModel
        component.width = 250
        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
    }
}

extension TileletViewController: UIColorPickerViewControllerDelegate {
    
    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
        let selectedColor = picker.selectedColor
        if let selectedColor {
            colorPicker.selectedColor = selectedColor
        }
        present(colorPicker, animated: true)
    }
    
    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
        dismiss(animated: true)
    }
    
    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
        let color = viewController.selectedColor 
        var lightColorView: ColorPickerView<ColorPickerType>
        var darkColorView: ColorPickerView<ColorPickerType>
        switch colorPickerType {
        case .contentViewBackgroundColor:
            component.contentView.backgroundColor = color
        case .gradientColor1:
            gradientColorView1.selectedColor = viewController.selectedColor
            updateGradientColors()
        case .gradientColor2:
            gradientColorView2.selectedColor = viewController.selectedColor
            updateGradientColors()
        case .custom:
            var colorView: ColorPickerView<ColorPickerType>
            
            switch currentSurfaceColorType {
            case .background:
                colorView = backgroundColorCustomColorView
            case .eyebrow:
                colorView = eyebrowCustomColorView
            case .title:
                colorView = titleCustomColorView
            case .subtitle:
                colorView = subtitleCustomColorView
            case .directionalIcon:
                colorView = directionalIconCustomColorView
            case .descriptionIcon:
                colorView = descriptionIconCustomColorView
            }
            colorView.selectedColor = viewController.selectedColor
            
            switch currentSurfaceColorType {
            case .background:
                component.color = .custom(color)
            case .eyebrow:
                setEyebrowModel()
            case .title:
                setTitleModel()
            case .subtitle:
                setSubTitleModel()
            case .directionalIcon:
                setDirectionalIconModel()
            case .descriptionIcon:
                setDescriptiveIconModel()
            }            
        default:
            break
        }
    }
    
    func updateGradientColors(){
        if let selectedGradient1Color = gradientColorView1.selectedColor,
           let selectedGradient2Color = gradientColorView2.selectedColor{
            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
        }
    }
}

extension TileletViewController {
    
    enum BackgroundColor: String, CaseIterable {
        
        case primary, secondary, white, black, token, custom
        
        var color: TileContainer.BackgroundColor? {
            switch self {
            case .primary:
                    .primary
            case .secondary:
                    .secondary
            case .white:
                    .white
            case .black:
                    .black
            case .token:
                    nil
            case .custom:
                    nil
            }
        }
    }
}