import UIKit
import AsyncDisplayKit
import RxSwift
import RxCocoa_Texture

extension Reactive where Base: TestNode {

    var didTapPreviewImage: Observable<Void> {
        return base.previewImageNode.rx.tap.asObservable()
    }
}

class TestNode: ASDisplayNode {

    struct Const {
        static let imagePlaceholderColor: UIColor = .lightGray
        static let titleAttr: [VStyleAttribute] = [.font(.systemFont(ofSize: 13.0))]
    }

    var titleNode: ASTextNode = {
        let node = ASTextNode()
        // TODO: set node attributes
        return node
    }()

    var previewImageNode: ASNetworkImageNode = {
        let node = ASNetworkImageNode()
        // NOTE: use `Const` property
        node.backgroundColor = Const.imagePlaceholderColor
        return node
    }()

    private let longpressGesture = UILongPressGestureRecognizer()
    public let disposeBag = DisposeBag()

    init(viewModel: CardShowViewModel) {
        super.init()
        self.automaticallyManagesSubnodes = true // ⚠️ important! ⚠️
        self.rxBind(viewModel)
    }

    override func didLoad() {
        super.didLoad()
        self.view.addGestureRecognizer(longpressGesture)
    }
}

// MARK: - RxBinding
extension TestNode {

    private func rxBind(_ viewModel: CardShowViewModel) {
        viewModel.title
            .bind(to: titleNode.rx.text(Const.titleAttr),
                  setNeedsLayout: self)
            .disposed(by: disposeBag)

        viewModel.profileImageURL
            .bind(to: previewImageNode.rx.url)
            .disposed(by: disposeBag)
    }
}

// MARK: - LayoutSpec
extension TestNode {

    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
        let previewImageLayout = self.previewImageLayoutSpec(constrainedSize)

        // NOTE: define flexBox attribute
        titleNode.style.shrink(1.0).nonGrow()
        previewImageLayout.style.shrink(1.0).grow(1.0)

        return ASStackLayoutSpec(direction: .vertical,
                                 spacing: 0.0,
                                 justifyContent: .start,
                                 alignItems: .stretch,
                                 children: [titleNode, previewImageLayout])
    }

    private func previewImageLayoutSpec(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
        let ratioLayout = ASRatioLayoutSpec(ratio: 1.0, child: previewImageNode)
        return ASInsetLayoutSpec(insets: .zero, child: ratioLayout)
    }
}