Trio/Dependencies/LoopKit/LoopKitUI/Views/InstructionList.swift

//
//  InstructionList.swift
//  LoopKitUI
//
//  Created by Nathaniel Hamming on 2020-02-20.
//  Copyright © 2020 LoopKit Authors. All rights reserved.
//

import SwiftUI

public struct InstructionList: View {
    struct Instruction {
        let text: String
        let subtext: String?
    }
    let instructions: [Instruction]
    let startingIndex: Int
    let instructionColor: Color
    
    @Environment(\.isEnabled) var isEnabled
    
    public init(instructions: [String], startingIndex: Int = 1, instructionColor: Color = .primary) {
        self.instructions = instructions.map { Instruction(text: $0, subtext: nil) }
        self.startingIndex = startingIndex
        self.instructionColor = instructionColor
    }
    
    public init(instructions: [(String, String)], startingIndex: Int = 1, instructionColor: Color = .primary) {
        self.instructions = instructions.map { Instruction(text: $0.0, subtext: $0.1) }
        self.startingIndex = startingIndex
        self.instructionColor = instructionColor
    }
    
    public var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            ForEach(instructions.indices, id: \.self) { index in
                HStack(alignment: .top) {
                    Text("\(index+startingIndex)")
                        .opacity(isEnabled ? 1.0 : 0.8)
                        .padding(6)
                        .background(Circle().fill(Color.accentColor))
                        .foregroundColor(Color.white)
                        .font(.caption)
                        .accessibility(label: Text("\(index+1), ")) // Adds a pause after the number
                    instructionView(instructions[index])
                }
                .accessibilityElement(children: .combine)
            }
        }
    }
    
    @ViewBuilder
    private func instructionView(_ instruction: Instruction) -> some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(instruction.text)
                .fixedSize(horizontal: false, vertical: true)
            if let subtext = instruction.subtext {
                Text(subtext)
                    .fixedSize(horizontal: false, vertical: true)
                    .foregroundColor(isEnabled ? instructionColor : Color.secondary)
                    .font(.caption)
            }
        }
        .padding(2)
        .foregroundColor(isEnabled ? instructionColor : Color.secondary)
    }
}

struct InstructionList_Previews: PreviewProvider {
    static var previews: some View {
        let instructions: [String] = [
            "This is the first step.",
            "This second step is a bit more tricky and needs more description to support the user, albeit it could be more concise.",
            "With this final step, the task will be accomplished."
        ]
        return InstructionList(instructions: instructions)
    }
}