DarkModeSwitch.swift

//
//  DarkModeMasker.swift
//  SwiftUI Demos
//
//  Created by Morten Just on 1/22/23.
// https://twitter.com/joshguospace/status/1617101052192649216?s=12

import SwiftUI
import Charts

struct DarkModeMasker: View {
    @State var name = ""
    @State var sales = [Int]()
    @State var dates = [Int]()
    @State var isLight = false
    
    func DataPoint(_ data: String, label: String) -> some View {
        VStack {
            Text(data).font(.largeTitle)
            Text(label)
        }
    }
    
    @State var overToggle = false
    func ModeToggle() -> some View {
        HStack {
            Spacer()
            Toggle(isOn: $isLight) {
                Text("Light")
            }
            .toggleStyle(.switch)
            .padding()
            
        }
    }
    
    func MainView(_ isDark : Bool) -> some View {
        VStack {
            ModeToggle()
            
            VStack {
                let g = LinearGradient(
                    colors: isDark ? [.orange, .yellow] :   [.teal, .blue], startPoint: .top, endPoint: .bottom)
                Text("Sales").font(.largeTitle.bold())
                    .frame(maxWidth: .infinity, alignment: .leading)
                Chart {
                    ForEach(dates, id: \.self) {
                        AreaMark(x: .value("Date", $0), y: .value("Sales", sales[$0]))
                            .foregroundStyle(g)
                            .interpolationMethod(.catmullRom)
                    }
                }
                HStack(spacing: 35) {
                    DataPoint("$393", label: "Avg.")
                    DataPoint("$29", label: "Per min")
                    DataPoint("$529", label: "Max")
                    DataPoint("$9", label: "Min")
                }
            }
            .padding(30)
            .frame(maxWidth: 400)
            .background { Color.primary.opacity(0.04)}
            .cornerRadius(10)
            .padding(30)
            
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background {
            Rectangle().fill(Color(nsColor: .windowBackgroundColor))
        }
        .colorScheme(isDark ? .dark : .light)
    }
    
    @State var sliderX : CGFloat = 0
    var body: some View {
        VStack {
            ZStack {
                GeometryReader { reader in
                    let w = reader.size.width
                    
                    MainView(true)
                    MainView(false)
                        .mask {
                            ZStack {
                                
                                // slider mask
                            HStack {
                                Rectangle()
                                    .frame(width: sliderX)
                                    Spacer()
                            }
                                // circle mask
                            Circle()
                                .position(x: w, y:0)
                                .scaleEffect(isLight ? 4 : 0, anchor: .topTrailing)
                            }
                        }
                    VStack {
                        Spacer()
                        
                        // slider
                    Capsule()
                        .position(x: sliderX)
                        .frame(width: 15, height: 10)
                        .gesture(DragGesture()
                            .onChanged({ value in
                                sliderX = max(0, value.location.x)
                            })
                        )
                        Spacer()
                    }
                }
            }
        }
        .animation(.default, value: isLight)
        .ignoresSafeArea()
        .onTapGesture {
            isLight.toggle()
        }
        .onAppear {
            sales = (0...32).map { Int.random(in: 10...50) + $0 * 2 }
            dates = (0...30).map { $0 }
        }
    }
}

struct DarkModeMasker_Previews: PreviewProvider {
    static var previews: some View {
        DarkModeMasker()
    }
}