State bug

//
//  ContentView.swift
//  NewNav
//
//  Created by Egor Merkushev on 15.06.2022.
//

import SwiftUI

struct CustomColorCategory: Identifiable, Hashable, Equatable {
    var id = UUID()
    
    let colors: [CustomColor]
    let name: String
}


struct CustomColor: Identifiable, Hashable {
    var id = UUID()
    
    let color: Color
    let name: String
}


struct ContentView: View {
    
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    var colorsCategories: [CustomColorCategory] = [
        CustomColorCategory(colors: [
            CustomColor(color: .red, name: "red"),
            CustomColor(color: .blue, name: "blue"),
            CustomColor(color: .yellow, name: "yellow")
        ], name: "common"),
        CustomColorCategory(colors: [
            CustomColor(color: .cyan, name: "cyan"),
            CustomColor(color: .mint, name: "mint"),
            CustomColor(color: .accentColor, name: "accent")
        ], name: "specific"),
    ]
    @State var selectedCategory: CustomColorCategory?
    @State var selectedColor: CustomColor?
    @State var pathCategory: NavigationPath = NavigationPath()
    @State var pathColor: NavigationPath = NavigationPath()
    
    var body: some View {
        NavigationSplitView {
            List(colorsCategories, selection: $selectedCategory) { category in
                NavigationLink(value: category) { // does not work with List selection option, presents just for visual style of selection provided by Split View
                    Text(category.name)
                }
            }
            .navigationTitle("Categories")
        } content: {
            NavigationStack(path: $pathCategory) {
                CategoryView(category: selectedCategory,
                             colorSelection: $selectedColor)
            }
        } detail: {
//            NavigationStack (path: $pathColor) {
                DetailView(color: selectedColor)
//            }
        }
        .onAppear {
            print("debug: NavigationSplitView appears")
        }
        
        .onChange(of: pathCategory) { newValue in
            print("debug: pathCategory -> \(newValue)")
//            pathColor.removeLast(pathColor.count)
//            if horizontalSizeClass == .compact {
//                print("debug: ")
//            }
//            print("debug: count \(pathCategory.count) \(pathCategory)")
            guard pathCategory.isEmpty else { return }
            selectedCategory = nil
//            selectedColor = nil
        }
        .onChange(of: pathColor) { newValue in 
            print("debug: pathColor -> \(newValue)")
        }
        .onChange(of: selectedCategory) { newValue in
            print("debug: selectedCategory -> \(String(describing: newValue))")
            selectedColor = nil
            if let category = newValue {
                print("debug: .onChange(of: selectedCategory) 1")
                pathCategory = NavigationPath.init([category])
            } else {
                print("debug: .onChange(of: selectedCategory) 2")
                pathCategory.removeLast(pathCategory.count)
            }
        }
        .onChange(of: selectedColor) { newValue in
            print("debug: selectedColor -> \(String(describing: newValue))")
//            if let color = newValue {
//                pathColor = NavigationPath.init([color])
//            } else {
//                pathColor.removeLast(pathColor.count)
//            }
        }
    }
}

struct CategoryView: View {
    
    var category: CustomColorCategory?
    @Binding var colorSelection: CustomColor?
    
    var body: some View {
        List(category?.colors ?? [],
             selection: $colorSelection) 
        { color in
            NavigationLink(value: color) {
                HStack {
                    Rectangle()
                        .fill(color.color)
                        .frame(width: 20, height: 20)
                    Text(color.name)
                }
            }
        }
        .navigationTitle(category?.name ?? "")
        .onAppear {
            print("debug: CategoryView appears with category: \(category?.name ?? "no category"), colorSelection: \(String(describing: colorSelection))")
        }
        .onDisappear {
            print("debug: CategoryView disappears with category: \(category?.name ?? "no category"), colorSelection: \(String(describing: colorSelection))")
        }
    }
    
}

struct DetailView: View {
    let color: CustomColor?
    
    var body: some View {
        VStack {
            if let color {
                Rectangle()
                    .fill(color.color)
                    .frame(width: 200, height: 200)
                Text(color.name)
            } else {
                EmptyView()
            }
        }
        .navigationTitle(color?.name ?? "")
        .onAppear {
            print("debug: DetailView appears with color: \(String(describing: color))")
        }
        .onDisappear {
            print("debug: DetailView disappears with color: \(String(describing: color))")
        }
        .onChange(of: color) { newValue in
            print("debug: DetailView onChange color: \(String(describing: color)) -> \(String(describing: newValue))")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}