TaskRowView

TaskRowView.swift

//
//  TaskRowView.swift
//  ToDo_UI
//
//  Created by Shubham on 12/11/24.
//

import SwiftUI

struct TaskRowView: View {
    
    // MARK: - variables
    @Environment(TaskManager.self) var taskManager
    @Environment(\.colorScheme) var colorScheme
    
    @Environment(\.managedObjectContext) private var viewContext
    
    @State var viewOffset: CGFloat = 2
    @State var deleteOpacity: Double = 0
    
    @StateObject var task: Task
    
    let deleteOffset: CGFloat = -40
    
    let animationDuration: TimeInterval = 0.35
    
    var dragGesture: some Gesture {
        DragGesture(minimumDistance: 3.0, coordinateSpace: .local)
            .onEnded { value in
                if value.translation.width < 0 {
                    withAnimation(.interactiveSpring(response: animationDuration)) {
                        viewOffset = deleteOffset
                        deleteOpacity = 1
                    }
                }
                else if value.translation.width > 0  {
                    withAnimation(.interactiveSpring(response: animationDuration)) {
                        viewOffset = 2
                        deleteOpacity = 0
                    }
                }
            }
    }
    
    // MARK: - Views
    var body: some View {
        ZStack(alignment: .leading) {
            ZStack {
                RoundedRectangle(cornerRadius: 8)
                    .foregroundStyle(Color.backgroundNeu)
                    .overlay {
                        HStack(spacing: 12) {
                            Button(action: {
                                taskManager.toggleTaskStatus(task: task, context: viewContext)
                            }) {
                                RoundedRectangle(cornerRadius: 8)
                                    .frame(width: 34, height: 34)
                                    .foregroundColor(task.completed ? Color.green : Color.gray.opacity(0.5))
                                    .animation(.spring(response: animationDuration), value: task.completed)
                                    .overlay {
                                        Tick()
                                            .trim(from: 0, to: task.completed ? 1 : 0)
                                            .stroke(lineWidth: 14)
                                            .scaleEffect(0.2)
                                            .foregroundColor(Color.white)
                                            .frame(width: 24, height: 24)
                                            .opacity(task.completed ? 1 : 0)
                                            .animation(.smooth, value: task.completed)
                                    }
                            }
                            
                            Text(task.name ?? "")
                                .font(Nocturne.medium.font(size: 20))
                                .foregroundColor(task.completed ? Color.green : Color.label)
                                .animation(.smooth(duration: animationDuration).delay(0.05), value: task.completed)
                                .onTapGesture {
                                    taskManager.toggleTaskStatus(task: task, context: viewContext)
                                }
                                .overlay(alignment: .leading) {
                                    Rectangle()
                                        .stroke(lineWidth: 1.5)
                                        .offset(y: 2)
                                        .opacity(task.completed ? 1 : 0)
                                        .frame(height: 1)
                                    
                                        .frame(width: task.completed ? .none : 0)
                                        .animation(.interpolatingSpring(mass: 2.5, stiffness: 5, damping: 15, initialVelocity: 2), value: task.completed)
                                }
                                .padding(.leading, 8)
                            
                            Spacer()
                        }
                        .padding(.leading, 16)
                    }
            }
            .offset(x: viewOffset)
            
            HStack {
                Spacer()
                Button(action: {
                    taskManager.deleteTask(task: task, context: viewContext)
                    
                    withAnimation(.interactiveSpring(duration: animationDuration)) {
                        deleteOpacity = 0
                        viewOffset = 2
                    }
                }) {
                    Image(systemName: "multiply")
                        .font(.system(size: 24, weight: .semibold))
                        .foregroundColor(.red)
                }
            }
            .opacity(deleteOpacity)
        }
        .simultaneousGesture(dragGesture)
    }
}

#Preview {
    TaskRowView(task: Task(taskName: "Demo", date: Date(), completionStatus: false, context: PersistenceController.shared.container.viewContext))
        .environment(\.managedObjectContext, PersistenceController.shared.container.viewContext)
        .environment(TaskManager())
        .frame(height: 52)
        .padding(24)
}