GradientLoadingBar/Example/Example/Scenes/SwiftUIExample/SwiftUIExampleView.swift

//
//  SwiftUIExampleView.swift
//  Example
//
//  Created by Felix Mau on 07.03.22.
//  Copyright © 2022 Felix Mau. All rights reserved.
//

import SwiftUI
import GradientLoadingBar

struct SwiftUIExampleView: View {
    // MARK: - Render

    var body: some View {
        List {
            // We need to apply a `Spacer()` as header to have a little space between the sections
            // and the navigation bar.
            Section(header: Spacer()) {
                DefaultExampleView()
            }

            Section {
                CustomColorsExampleView()
            }

            Section {
                CustomProgressDurationExampleView()
            }
        }
        .navigationTitle("🎨 SwiftUI Example")
    }
}

// MARK: - Subviews

private struct TitleSubtitleView: View {
    let title: String
    let subtitle: String

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .font(.headline)
            Text(subtitle)
                .font(.subheadline)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

private struct DefaultExampleView: View {
    @State
    private var isVisible = false

    var body: some View {
        VStack(spacing: 16) {
            TitleSubtitleView(title: "Default example",
                              subtitle: "Example using the default configuration.")

            GradientLoadingBarView()
                .frame(maxWidth: .infinity, maxHeight: 3)
                .cornerRadius(1.5)
                .opacity(isVisible ? 1 : 0)

            HStack(spacing: 16) {
                Button("Show") {
                    withAnimation(.easeInOut) {
                        isVisible = true
                    }
                }
                .buttonStyle(RoundedRectangleButtonStyle())

                Button("Hide") {
                    withAnimation(.easeInOut) {
                        isVisible = false
                    }
                }
                .buttonStyle(RoundedRectangleButtonStyle())
            }
        }
        .padding(.horizontal, 8)
        .padding(.vertical, 16)
    }
}

private struct CustomColorsExampleView: View {
    private enum Config {
        /// The custom gradient colors we use.
        /// Source: https://color.adobe.com/Pink-Flamingo-color-theme-10343714/
        static let gradientColors = [
            #colorLiteral(red: 0.9490196078, green: 0.3215686275, blue: 0.431372549, alpha: 1), #colorLiteral(red: 0.9450980392, green: 0.4784313725, blue: 0.5921568627, alpha: 1), #colorLiteral(red: 0.9529411765, green: 0.737254902, blue: 0.7843137255, alpha: 1), #colorLiteral(red: 0.4274509804, green: 0.8666666667, blue: 0.9490196078, alpha: 1), #colorLiteral(red: 0.7568627451, green: 0.9411764706, blue: 0.9568627451, alpha: 1),
        ].map(Color.init)
    }

    @State
    private var isVisible = false

    var body: some View {
        VStack(spacing: 16) {
            TitleSubtitleView(title: "Custom colors",
                              subtitle: "Example showing how to provide custom gradient colors.")

            GradientLoadingBarView(gradientColors: Config.gradientColors)
                .frame(maxWidth: .infinity, maxHeight: 3)
                .cornerRadius(1.5)
                .opacity(isVisible ? 1 : 0)

            HStack(spacing: 16) {
                Button("Show") {
                    withAnimation(.easeInOut) {
                        isVisible = true
                    }
                }
                .buttonStyle(RoundedRectangleButtonStyle())

                Button("Hide") {
                    withAnimation(.easeInOut) {
                        isVisible = false
                    }
                }
                .buttonStyle(RoundedRectangleButtonStyle())
            }
        }
        .padding(.horizontal, 8)
        .padding(.vertical, 16)
    }
}

private struct CustomProgressDurationExampleView: View {
    private enum Config {
        ///
        static let progressDuration: TimeInterval = 10
    }

    @State
    private var isVisible = false

    var body: some View {
        VStack(spacing: 16) {
            TitleSubtitleView(title: "Custom animation duration",
                              subtitle: "Example showing how to provide a custom progress animation duration.")

            GradientLoadingBarView(progressDuration: Config.progressDuration)
                .frame(maxWidth: .infinity, maxHeight: 3)
                .cornerRadius(1.5)
                .opacity(isVisible ? 1 : 0)

            HStack(spacing: 16) {
                Button("Show") {
                    withAnimation(.easeInOut) {
                        isVisible = true
                    }
                }
                .buttonStyle(RoundedRectangleButtonStyle())

                Button("Hide") {
                    withAnimation(.easeInOut) {
                        isVisible = false
                    }
                }
                .buttonStyle(RoundedRectangleButtonStyle())
            }
        }
        .padding(.horizontal, 8)
        .padding(.vertical, 16)
    }
}

// MARK: - Helper

private struct RoundedRectangleButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(12)
            .frame(maxWidth: .infinity)
            .foregroundColor(.white)
            .background(Color.blue.cornerRadius(8))
            .scaleEffect(configuration.isPressed ? 0.95 : 1)
    }
}

// MARK: - Preview

struct SwiftUIExampleView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIExampleView()
    }
}