//
//  ContentView.swift
//  ToggleControl
//
//  Created by lujun on 2021/12/19.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        toggleControl
            
    }
    
    @State private var toggleSwitchState: Bool = false
    var toggleControl: some View {
        VStack(spacing: 40) {
            Text("Toggle's Status is \(toggleSwitchState ? " ON" : "OFF")")
            Toggle("Vibrate On Ring",isOn: $toggleSwitchState)
                .background(Color.orange)
            Toggle("",isOn: $toggleSwitchState)
                .background(Color.purple)
            
            Toggle(isOn: $toggleSwitchState) {
                VStack{
                    Color.blue
                        .frame(width: 100, height: 100)
                        .cornerRadius(20)
                    Text("Demo 123 21321")
                }
            }
            .background(Color.red)
        }
//        .labelsHidden()
        .toggleStyle(SwitchToggleStyle())
//        .toggleStyle(DefaultToggleStyle())
//        .toggleStyle(RedBorderedToggleStyle())
//        .toggleStyle(SwitchToggleStyle(tint: Color.blue))
//        .toggleStyle(SystemToggleStyle(tint: .orange))
//        .toggleStyle(CheckboxToggleStyle())
    }
    struct RedBorderedToggleStyle: ToggleStyle {
        func makeBody(configuration: Configuration) -> some View {
           Toggle(configuration)
                .border(Color.red)
        }
    }
    struct SystemToggleStyle: ToggleStyle {
        let tint: Color
        func makeBody(configuration: Configuration) -> some View {
            HStack {
                configuration.label
                Spacer()
                Button{
                    configuration.isOn.toggle()
                } label: {
                    ToggleContentView(isOn: configuration.isOn,tint: tint)
                }
            }
            .padding(.horizontal,2)
        }
    }
    
    struct ToggleContentView: View {
        let isOn: Bool
        let tint: Color
        var body: some View{
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 56, height: 30)
                .foregroundColor(isOn ? tint : .secondary)
                .overlay(
                 Circle()
                    .foregroundColor(Color.white)
                    .frame(width: 26)
                    .padding(2),
                 alignment: isOn ? .trailing : .leading
                    
                )
                .animation(.linear(duration: 0.25))
        }
    }
    
}

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