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

import Foundation
import UIKit
import VDS
import VDSTokens
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 subtitleColorPickerSelectorView = {
        PickerSelectorView<Use>(title: "",
                                picker: self.picker,
                                items: [.primary, .secondary])
    }()
    
    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()
        if case .custom(let hexCode) = component.color {
            picker.selectedColor = UIColor(hexString: hexCode)
        }
        picker.delegate = self
        return picker
    }()
    
    lazy var backgroundColorPickerSelectorView = {
        PickerSelectorView(title: "white",
                           picker: self.picker,
                           items: BackgroundColor.allCases)
    }()

    lazy var gradientColorView1: UIStackView = {
        let stackView = UIStackView()
        let indicatorWrapper = View()
        indicatorWrapper.addSubview(gradientColor1View)
        indicatorWrapper.height(32)
        indicatorWrapper.pinTop()
        indicatorWrapper.pinLeading()
        indicatorWrapper.pinBottom()
        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
        stackView.addArrangedSubview(indicatorWrapper)
        stackView.distribution = .fillEqually
        stackView.alignment = .fill
        var button = Button().with { instance in
            instance.size = .small
            instance.use = .secondary
            instance.text = "Select"
            instance.onClick = { [weak self] in
                self?.gradientColorTapped($0, view: self?.gradientColor1View)
            }
        }
        button.tag = 1
        let buttonWrapper = View()
        buttonWrapper.addSubview(button)
        buttonWrapper.height(32)
        button.pinTop()
        button.pinTrailing()
        button.pinBottom()
        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
        stackView.addArrangedSubview(buttonWrapper)
        stackView.tag = 1
        stackView.spacing = 10
        return stackView
    }()
    
    lazy var gradientColorView2: UIStackView = {
        let stackView = UIStackView()
        stackView.distribution = .fillEqually
        stackView.alignment = .fill
        stackView.spacing = 10
        let indicatorWrapper = View()
        indicatorWrapper.addSubview(gradientColor2View)
        indicatorWrapper.height(32)
        indicatorWrapper.pinTop()
        indicatorWrapper.pinLeading()
        indicatorWrapper.pinBottom()
        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
        stackView.addArrangedSubview(indicatorWrapper)
        var button = Button().with { instance in
            instance.size = .small
            instance.use = .secondary
            instance.text = "Select"
            instance.onClick = { [weak self] in
                self?.gradientColorTapped($0, view: self?.gradientColor2View)
            }
        }
        button.tag = 2
        let buttonWrapper = View()
        buttonWrapper.addSubview(button)
        buttonWrapper.height(32)
        button.pinTop()
        button.pinTrailing()
        button.pinBottom()
        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
        stackView.addArrangedSubview(buttonWrapper)
        stackView.tag = 2
        return stackView
    }()
    
    var gradientColor1View: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
        view.tag = 1
        return view
    }()
    
    var gradientColor2View: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
        view.tag = 2
        return view
    }()
    
    lazy var textAlignmentPickerSelectorView = {
        PickerSelectorView(title: "left",
                           picker: self.picker,
                           items: TitleLockup.TextAlignment.allCases)
    }()
    
    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 colorPickerType: ColorPickerType = .backgroundColor
    var selectedGradient1Color: String?
    var selectedGradient2Color: String?
    var selectedGradientColorView: UIView?
    var showDropShadowSwitch = Toggle()
    var backgroundColor: BackgroundColor = .black
    var maxWidthTextField = NumericField()

    var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        addContentTopView(view: .makeWrapper(for: component))
        
        setupPicker()
        setupModel()
    }
    
    override func setupForm(){
        super.setupForm()
        addFormRow(label: "Surface", view: surfacePickerSelectorView)
        addActionRow()
        addFormRow(label: "Clickable", view: clickableSwitch)
                
        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(Minimum height is configurable.)", view: textPositionPickerSelectorView)
        addFormRow(label: "Description Icon", view: showDescriptionIconSwitch)
        addFormRow(label: "Directional Icon", view: showDirectionalIconSwitch)

        addFormRow(label: "Badge Text", view: badgeTextField)
        addFormRow(label: "Badge Fill Color", view: badgeFillColorPickerSelectorView)
        addFormRow(label: "Badge Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
        addFormRow(label: "Badge Max Width", view: maxWidthTextField)

        addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
        addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
        
        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
        addFormRow(label: "Title Text", view: titleTextField)
        addFormRow(label: "Title is Bold", view: titleIsBold)
        
        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
        addFormRow(label: "Subtitle Text", view: subTitleTextField)
                        
        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
        addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
        addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
        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)
        
        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
            }
        }
        
        heightTextField
            .numberPublisher
            .sink { [weak self] number in
                guard let self else { return }
                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
                    self.component.height = value
                    self.component.layoutIfNeeded()
                }
            }.store(in: &subscribers)
        
        widthTextField
            .numberPublisher
            .sink { [weak self] number in
                guard let self else { return }
                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
                    self.component.width = value
                    self.component.layoutIfNeeded()
                }
            }.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
            if sender.isOn {
                self?.showDirectionalIconSwitch.isOn = false
                self?.component.descriptiveIconModel = .init(size: .medium, surface: .dark)
            } else {
                self?.component.descriptiveIconModel = nil
            }
        }
        
        showDirectionalIconSwitch.onChange = { [weak self] sender in
            if sender.isOn {
                self?.showDescriptionIconSwitch.isOn = false
                self?.component.directionalIconModel = .init(size: .medium, surface: .dark)
            } else {
                self?.component.directionalIconModel = nil
            }
        }

        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
                if self?.component.width == nil {
                }
            } else {
                self?.component.backgroundImage = nil
            }
        }
        
        showDropShadowSwitch.onChange =  { [weak self] sender in
            self?.component.showDropShadows = 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 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.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
        subtitleColorPickerSelectorView.text = subTitleModel.textColor.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()
    }
    
    //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 {
            component.titleModel = Tilelet.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
        } else {
            component.titleModel = nil
        }
    }
    
    func setSubTitleModel() {
        if let text = subTitleTextField.text, !text.isEmpty {
            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem)
        } else {
            component.subTitleModel = nil
        }
    }
    
    func setEyebrowModel() {
        if let text = eyebrowTextField.text, !text.isEmpty {
            component.eyebrowModel = Tilelet.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
        } else {
            component.eyebrowModel = nil
        }
    }
    
    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()
        }
        
        subtitleColorPickerSelectorView.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.selectedGradient1Color = nil
                self.selectedGradient1Color = nil
                self.gradientColor1View.backgroundColor = .clear
                self.gradientColor2View.backgroundColor = .clear
            } else {
                self.colorPickerType = .gradientColors
                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 }
            self.component.color = self.getTilelet(backgroundColor: item)
        }
    }
    
    func gradientColorTapped(_ sender: Button, view: UIView?) {
        selectedGradientColorView = view
        let selectedColor = (sender.tag == 1) ? selectedGradient1Color : selectedGradient2Color
        if let selectedColor {
            colorPicker.selectedColor = UIColor(hexString: selectedColor)
        }
        present(colorPicker, animated: true)
    }
    
    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
        }
    }
}

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 {
    
    //Internal helper enum to identiy the configuration
    enum ColorPickerType {
        case backgroundColor, gradientColors, contentViewBackgroundColor
    }

    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
        dismiss(animated: true)
    }
    
    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
        guard let hexString = viewController.selectedColor.hexString else { return }
        switch colorPickerType {
        case .contentViewBackgroundColor:
            component.containerView.backgroundColor = UIColor(hexString: hexString)
        case .backgroundColor:
            component.color = .custom(hexString)
        case .gradientColors:
            guard let selectedGradientColorView else { return }
            if selectedGradientColorView.tag == 1 {
                selectedGradient1Color = hexString
            } else {
                selectedGradient2Color = hexString
            }
            selectedGradientColorView.backgroundColor = UIColor(hexString: hexString)
            if let selectedGradient1Color, let selectedGradient2Color {
                component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
            }
        }
    }
}

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