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

import Foundation
import UIKit
import VDS
import VDSColorTokens
import Combine

class TileContainerViewController: BaseViewController<TileContainer> {
    
    lazy var backgroundColorPickerSelectorView = {
        PickerSelectorView(title: "white",
                           picker: self.picker,
                           items: TileContainer.BackgroundColor.allCases)
    }()
    
    lazy var imageFallbackColorPickerSelectorView = {
        SurfacePickerSelectorView(picker: self.picker)
    }()
    
    lazy var paddingPickerSelectorView = {
        PickerSelectorView(title: "16",
                           picker: self.picker,
                           items: TileContainer.Padding.allCases)
    }()
    
    lazy var scalingTypePickerSelectorView = {
        PickerSelectorView(title: "white",
                           picker: self.picker,
                           items: TileContainer.AspectRatio.allCases)
    }()
    
    var clickableSwitch = Toggle()

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

    var backgroundImage = UIImage(named: "backgroundTest")!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        addContentTopView(view: .makeWrapper(for: component))
        component.width = 150
        component.color = .black

        setupPicker()
        setupModel()
    }
    
    override func setupForm(){
        super.setupForm()  
        formStackView.addArrangedSubview(Label().with {
            $0.textStyle = .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: 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: showBackgroundImageSwitch)
        addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
        
        clickableSwitch.onChange = { [weak self] sender in
            guard let self else { return }
            if sender.isOn {
                self.component.onClick = { _ in
                    print("you click on me!")
                }
            } else {
                self.component.onClick = nil
            }
        }
        
        showBackgroundImageSwitch.onChange = { [weak self] sender in
            if let image = self?.backgroundImage, sender.isOn {
                self?.component.backgroundImage = image
            } else {
                self?.component.backgroundImage = nil
            }
        }

        showBorderSwitch.onChange = { [weak self] sender in
                self?.component.showBorder = sender.isOn
        }
        
        showDropShadowSwitch.onChange =  { [weak self] sender in
            self?.component.showDropShadows = sender.isOn
        }

        heightTextField
            .numberPublisher
            .sink { [weak self] number in
                self?.component.height = number?.cgFloatValue
            }.store(in: &subscribers)

        widthTextField
            .numberPublisher
            .sink { [weak self] number in
                self?.component.width = number?.cgFloatValue
            }.store(in: &subscribers)
    }
    
    func setupModel() {
        //setup UI
        surfacePickerSelectorView.text = component.surface.rawValue
        backgroundColorPickerSelectorView.text = component.color.rawValue
        paddingPickerSelectorView.text = component.padding.rawValue
        scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
        widthTextField.text = component.width != nil ? "\(component.width!)" : ""
        heightTextField.text = component.height != nil ? "\(component.height!)" : ""
    }
      
    func setupPicker(){
        
        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.surface = item
            self?.contentTopView.backgroundColor = item.color
        }
        
        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.color = item
        }
        
        scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.aspectRatio = item
        }
        
        paddingPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.padding = item
        }

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

extension TileContainerViewController: ComponentSampleable {
    static func makeSample() -> ComponentSample {
        let component = Self.makeComponent()
        component.width = 150
        component.color = .black
        return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
    }
}