import SwiftUI

/// A custom toggle style designed for task completion indication.
///
/// This style renders a circular checkbox that visually represents completion state:
/// - **Off state**: An empty circle with a secondary-colored stroke border
/// - **On state**: A circle with a primary-colored stroke border containing a filled inner circle
///
/// ## Usage
///
/// Apply this style to any `Toggle` view using the `.completion` static accessor:
///
/// ```swift
/// Toggle("Complete task", isOn: $isCompleted)
///     .toggleStyle(.completion)
/// ```
struct CompletionToggleStyle: ToggleStyle {

    // MARK: Functions

    func makeBody(configuration: Configuration) -> some View {
        Button {
            configuration.isOn.toggle()
        } label: {
            HStack(alignment: .top, spacing: 12) {
                ZStack {
                    Circle()
                        .strokeBorder(
                            configuration.isOn ? .primary : .secondary,
                            lineWidth: 2
                        )
                        .frame(width: 24, height: 24)

                    if configuration.isOn {
                        Circle()
                            .fill(.primary)
                            .frame(width: 16, height: 16)
                    }
                }
            }
        }
        .animation(
            .easeInOut,
            value: configuration.isOn
        )
        .buttonStyle(.plain)
    }

}

// MARK: - Toggle Style Extension

extension ToggleStyle where Self == CompletionToggleStyle {

    /// A toggle style for task completion with a circular checkbox design.
    ///
    /// This convenience accessor provides easy access to the ``CompletionToggleStyle``
    /// for use with SwiftUI's toggle style modifier.
    static var completion: CompletionToggleStyle {
        CompletionToggleStyle()
    }

}

// MARK: - Previews

#Preview("Completion toggle style") {
    @Previewable
    @State
    var isOn = false

    Toggle(
        "Unchecked task",
        isOn: $isOn
    )
    .toggleStyle(.completion)
}