//
//  RecipeInstructionSection.swift
//  Nextcloud Cookbook iOS Client
//
//  Created by Vincent Meilinger on 01.03.24.
//

import Foundation
import SwiftUI

// MARK: - RecipeView Instructions Section

struct RecipeInstructionSection: View {
    @ObservedObject var viewModel: RecipeView.ViewModel

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                SecondaryLabel(text: LocalizedStringKey("Instructions"))
                Spacer()
            }
            ForEach(viewModel.observableRecipeDetail.recipeInstructions.indices, id: \.self) { ix in
                RecipeInstructionListItem(instruction: $viewModel.observableRecipeDetail.recipeInstructions[ix], index: ix+1)
            }
        }
        .padding()
        
    }
}


// MARK: - Recipe Edit Instruction Section (Form-based)

struct RecipeEditInstructionSection: View {
    @Binding var instructions: [String]

    var body: some View {
        Section {
            ForEach(instructions.indices, id: \.self) { index in
                HStack(alignment: .top) {
                    Text("\(index + 1).")
                        .foregroundStyle(.secondary)
                        .monospacedDigit()
                    TextField("Step \(index + 1)", text: $instructions[index], axis: .vertical)
                        .lineLimit(1...10)
                    Image(systemName: "line.3.horizontal")
                        .foregroundStyle(.tertiary)
                        .padding(.top, 4)
                }
            }
            .onDelete { indexSet in
                instructions.remove(atOffsets: indexSet)
            }
            .onMove { from, to in
                instructions.move(fromOffsets: from, toOffset: to)
            }

            Button {
                instructions.append("")
            } label: {
                Label("Add Step", systemImage: "plus.circle.fill")
            }
        } header: {
            Text("Instructions")
        }
    }
}



fileprivate struct RecipeInstructionListItem: View {
    @Binding var instruction: String
    @State var index: Int
    @State var isSelected: Bool = false
    
    var body: some View {
        HStack(alignment: .top) {
            Text("\(index)")
                .monospaced()
            Text(instruction)
        }.padding(4)
        .foregroundStyle(isSelected ? Color.secondary : Color.primary)
        .onTapGesture {
            isSelected.toggle()
        }
        .animation(.easeInOut, value: isSelected)
    }
}