//
//  TileContainerViewController.swift
//  VDSSample
//
//  Created by Matt Bruce on 12/16/22.
//

import Foundation
import UIKit
import VDS
import VDSColorTokens
import Combine

class TileContainerViewController: BaseViewController {
    
    lazy var backgroundColorPickerSelectorView = {
        PickerSelectorView(title: "white",
                           picker: self.picker,
                           items: TileContainer.ContainerBackgroundColor.allCases)
    }()
    
    lazy var imageFallbackColorPickerSelectorView = {
        SurfacePickerSelectorView(picker: self.picker)
    }()
    
    lazy var paddingPickerSelectorView = {
        PickerSelectorView(title: "16",
                           picker: self.picker,
                           items: TileContainer.ContainerPadding.allCases)
    }()
    
    lazy var scalingTypePickerSelectorView = {
        PickerSelectorView(title: "white",
                           picker: self.picker,
                           items: TileContainer.ContainerScalingType.allCases)
    }()
    
    var clickableSwitch = Toggle()
    var clickableCancel: AnyCancellable?

    var showBackgroundImageSwitch = Toggle()
    var showBorderSwitch = Toggle()
    var showDropShadowSwitch = Toggle()
    var heightTextField = NumericField()
    var widthTextField = NumericField()

    var tileContainer = TileContainer()
    var backgroundImage = UIImage(named: "backgroundTest")!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        addContentTopView(view: .makeWrapper(for: tileContainer))
        tileContainer.width = 150
        tileContainer.containerBackgroundColor = .black
        setupForm()
        setupPicker()
        setupModel()
    }
    
    override func allTextFields() -> [TextField]? { [widthTextField, heightTextField] }
    func setupForm(){
        formStackView.addArrangedSubview(Label().with{
            $0.typograpicalStyle = .BoldBodyLarge
            $0.text = "This object does NOT reflect normal \"surface\" changes, all properties are maually set"
        })
        addFormRow(label: "Surface", view: surfacePickerSelectorView)
        addFormRow(label: "Clickable", view: .makeWrapper(for: clickableSwitch))
        addFormRow(label: "Width", view: widthTextField)
        addFormRow(label: "Height", view: heightTextField)
        addFormRow(label: "Show Border", view: showBorderSwitch)
        //addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
        addFormRow(label: "Padding", view: paddingPickerSelectorView)
        addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
        addFormRow(label: "Background Image", view: .makeWrapper(for: showBackgroundImageSwitch))
        addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)

        clickableSwitch
            .publisher(for: .valueChanged)
            .sink { [weak self] sender in
                if sender.isOn {
                    self?.clickableCancel = self?.tileContainer
                        .publisher(for: .touchUpInside)
                        .sink(receiveValue: { _ in
                            print("you click on me!")
                        })
                } else {
                    self?.clickableCancel?.cancel()
                    self?.clickableCancel = nil
                }
            }.store(in: &subscribers)

        showBackgroundImageSwitch
            .publisher(for: .valueChanged)
            .sink { [weak self] sender in
                if let image = self?.backgroundImage, sender.isOn {
                    self?.tileContainer.backgroundImage = image
                } else {
                    self?.tileContainer.backgroundImage = nil
                }
            }.store(in: &subscribers)

        showBorderSwitch
            .publisher(for: .valueChanged)
            .sink { [weak self] sender in
                self?.tileContainer.showBorder = sender.isOn
            }.store(in: &subscribers)

        showDropShadowSwitch
            .publisher(for: .valueChanged)
            .sink { [weak self] sender in
                self?.tileContainer.showDropShadows = sender.isOn
            }.store(in: &subscribers)

        heightTextField
            .textPublisher
            .sink { [weak self] text in
                if let n = NumberFormatter().number(from: text) {
                    self?.tileContainer.height = CGFloat(truncating: n)
                } else {
                    self?.tileContainer.height = nil
                }
            }.store(in: &subscribers)

        widthTextField
            .textPublisher
            .sink { [weak self] text in
                if let n = NumberFormatter().number(from: text) {
                    self?.tileContainer.width = CGFloat(truncating: n)
                }
            }.store(in: &subscribers)

    }
    
    func setupModel() {
        //setup UI
        surfacePickerSelectorView.text = tileContainer.surface.rawValue
        backgroundColorPickerSelectorView.text = tileContainer.containerBackgroundColor.rawValue
        paddingPickerSelectorView.text = tileContainer.containerPadding.rawValue
        scalingTypePickerSelectorView.text = tileContainer.aspectRatio.rawValue
        widthTextField.text = tileContainer.width != nil ? "\(tileContainer.width!)" : ""
        heightTextField.text = tileContainer.height != nil ? "\(tileContainer.height!)" : ""
    }
      
    func setupPicker(){
        
        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.tileContainer.surface = item
            self?.contentTopView.backgroundColor = item.color
        }
        
        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.tileContainer.containerBackgroundColor = item
        }
        
        scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.tileContainer.aspectRatio = item
        }
        
        paddingPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.tileContainer.containerPadding = item
        }

        imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.tileContainer.imageFallbackColor = item
        }
    }
}