//
//  CarouselViewController.swift
//  VDSSample
//
//  Created by Kanamarlapudi, Vasavi on 29/05/24.
//

import Foundation
import UIKit
import VDS
import Combine
import VDSCoreTokens

class CarouselViewController: BaseViewController<Carousel> {
    
    let label = Label()
    
    lazy var paginationDisplayPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Carousel.PaginationDisplay.allCases)
    }()
    
    lazy var peekPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Carousel.Peek.allCases)
    }()
    
    lazy var gutterPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Carousel.Gutter.allCases)
    }()
    
    lazy var layoutPickerSelectorView = {
        PickerSelectorView(title: "1UP",
                           picker: self.picker,
                           items: UIDevice.isIPad ? CarouselScrollbar.Layout.allCases : [CarouselScrollbar.Layout.oneUP, CarouselScrollbar.Layout.twoUP, CarouselScrollbar.Layout.threeUP])
    }()
    
    lazy var paginationKindPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: ButtonIcon.Kind.allCases)
    }()
    
    lazy var horizAlignmtPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Carousel.Horizontal.allCases)
    }()
    
    lazy var vertAlignmtPickerSelectorView = {
        PickerSelectorView(title: "",
                           picker: self.picker,
                           items: Carousel.Vertical.allCases)
    }()
    
    var paginationFloatingSwitch = Toggle()
    var paginationInsetField = NumericField()
    var widthTextField = NumericField()
    var percentageTextField = NumericField()
    var exampleSwitch = Toggle()
    var emptyData: [UIView] = []
    var rows: [UIView] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        addContentTopView(view: component)
        setupPicker()
        setupModel()
    }
    
    override func setupForm() {
        super.setupForm()
        //add form rows
        addFormRow(label: "onChange", view: label)
        addFormRow(label: "Surface", view: surfacePickerSelectorView)
        addFormRow(label: "Pagination Display", view: paginationDisplayPickerSelectorView)
        addFormRow(label: "Peek", view: peekPickerSelectorView)
        addFormRow(label: "Gutter", view: gutterPickerSelectorView)
        addFormRow(label: "Layout", view: layoutPickerSelectorView)
        addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
        addFormRow(label: "Pagination Float", view: paginationFloatingSwitch)
        addFormRow(label: "Pagination Inset", view: paginationInsetField)
        addFormRow(label: "Width", view: widthTextField)
        addFormRow(label: "Percentage (1-100)", view: percentageTextField)
        addFormRow(label: "Example", view: exampleSwitch)
        addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
        addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
        
        widthTextField
            .numberPublisher
            .sink { [weak self] number in
                if let number {
                    self?.component.width = .value(number.cgFloatValue)
                    self?.percentageTextField.text = ""
                } else {
                    self?.component.width = nil
                }
            }.store(in: &subscribers)
        
        percentageTextField
            .numberPublisher
            .sink { [weak self] number in
                if let number {
                    self?.component.width = .percentage(number.cgFloatValue)
                    self?.widthTextField.text = ""
                } else {
                    self?.component.width = nil
                }
            }.store(in: &subscribers)
        
        paginationInsetField
            .numberPublisher
            .sink { [weak self] number in
                if let number {
                    self?.component.paginationInset = number.cgFloatValue
                } else {
                    self?.component.paginationInset =  UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X
                }
            }.store(in: &subscribers)
        
        paginationFloatingSwitch.onChange = { [weak self] sender in
            guard let self else { return }
            self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
        }
        
        exampleSwitch.onChange = { [weak self] sender in
            guard let self else { return }
            component.views = sender.isOn ? rows : emptyData
            component.slotAlignment = nil
        }
        
    }
    
    func setupModel() {
        //setup UI
        paginationDisplayPickerSelectorView.text = component.paginationDisplay.rawValue
        peekPickerSelectorView.text = component.peek.rawValue
        gutterPickerSelectorView.text = component.gutter.rawValue
        layoutPickerSelectorView.text = component.layout.rawValue
        paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
        paginationFloatingSwitch.isOn = true
        paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
        let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")}
        rows.append(Label().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get 10% off"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
        rows.append(Button().with{ $0.use = .secondary; $0.text = "Secondary"; $0.onClick =  onClick})
        rows.append(Label().with { $0.text = "Get iPhone 15 on us. Online only. "; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
        rows.append(Button().with{ $0.use = .primary; $0.text = "Primary"; $0.onClick =  onClick})
        rows.append(Label().with { $0.text = "Unlimited plans. No trade-in required."; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
        rows.append(Label().with { $0.text = "With trade-in. Any condition guaranteed"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
        rows.append(Label().with { $0.text = "iPhone 14 Plus get it on us."; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
        rows.append(Label().with { $0.text = "Double the storage on us"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
        rows.append(Button().with{ $0.use = .secondary; $0.text = "Get iPhone 15"; $0.onClick =  onClick})
        rows.append(Button().with{ $0.use = .secondary; $0.text = "Get iPhone 14 Plus"; $0.onClick =  onClick})
        emptyData = [UIView(),UIView(),UIView(),UIView()]
        component.views = rows //exampleSwitch.isOn ? rows : emptyData
        component.renderItemStyle = .init(backgroundColor: "#d9d9d9", height: 100, width: 100, borderRadius: 12.0)
        label.text = "1"
        
        // Callback when moving the carousel. Returns initial visible slide's index in the carousel.
        component.onChange = { [weak self] selectedIndex in
            guard let self else { return }
            label.text = "\(selectedIndex)"
        }
    }
    
    func setupPicker() {
        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.surface = item
            self?.contentTopView.backgroundColor = item.color
        }
        
        paginationDisplayPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.paginationDisplay = item
            if (self?.component.peek == Carousel.Peek.none) && item == .none {
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
                    self?.paginationDisplayPickerSelectorView.text = "persistent"
                }
            }
        }
        
        peekPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.peek = item
            if item == .none {
                self?.paginationDisplayPickerSelectorView.text = "persistent"
            } else if item == .minimum && UIDevice.isIPad {
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
                    self?.peekPickerSelectorView.text = "standard"
                }
            } else if item == .standard && !UIDevice.isIPad && (self?.component.layout != CarouselScrollbar.Layout.oneUP) {
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
                    self?.peekPickerSelectorView.text = "minimum"
                }
            }
        }
        
        gutterPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            self?.component.gutter = item
        }
        
        layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            if item != .oneUP && !UIDevice.isIPad && self?.component.peek == Carousel.Peek.standard {
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
                    self?.peekPickerSelectorView.text = "minimum"
                }
            }
            self?.component.layout = item
        }
        
        paginationKindPickerSelectorView.onPickerDidSelect = {  [weak self] item in
            guard let self else { return }
            self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
        }
        
        vertAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
            guard let self else { return }
            self.component.slotAlignment = .init(vertical: item, horizontal: horizAlignmtPickerSelectorView.selectedItem)
        }
        
        horizAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
            guard let self else { return }
            self.component.slotAlignment = .init(vertical: vertAlignmtPickerSelectorView.selectedItem, horizontal: item)
        }
    }
}