import SwiftUI
import NukeUI

struct CrossFadingLazyImage: View {
    let url: URL?

    @State private var previousImage: Image?
    @State private var currentImage: Image?
    @State private var showNewImage = false

    var body: some View {
        LazyImage(url: url) { state in
            ZStack {
                if let previousImage {
                    previousImage
                        .resizable()
                        .scaledToFill()
                }

                if let currentImage {
                    currentImage
                        .resizable()
                        .scaledToFill()
                        .opacity(showNewImage ? 1 : 0)
                }
            }
            .clipped()
            .onChange(of: state.image) { new in
                print("onChange image \(new)")
                guard let new = new else { return }

                // Shift current -> previous, set new current
                previousImage = currentImage
                currentImage = new

                // Restart crossfade
                showNewImage = false
                withAnimation(.easeInOut(duration: 0.2)) {
                    showNewImage = true
                }
            }
            .onAppear {
                if let platformImage = state.image {
                    currentImage = platformImage
                    showNewImage = true
                }
            }
        }
    }
}