UpdatingIndicator.swift

//
//  ContentView.swift
//  Updater
//
//  Created by Jorge Bernal on 9/9/21.
//

import SwiftUI

struct Arrow: Shape {
    var complete: CGFloat

    var animatableData: CGFloat {
        get { complete }
        set { complete = newValue }
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.minX + rect.width * complete / 2, y: rect.midY + rect.midY * complete ))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX - rect.width * complete / 6, y: rect.midY - complete * rect.midY))
        path.move(to: CGPoint(x: rect.midX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY+5))
        return path
    }
}

struct UpdatingIndicator: View {
    let completeColor = Color(red: 0.498, green: 0.329, blue: 0.702)
    let pendingColor = Color(red: 0.686, green: 0.49, blue: 0.82)
    let borderColor = Color(red: 0.325, green: 0.208, blue: 0.51)
    let arrowColor = Color.white

    var complete: CGFloat
    var arrowComplete: CGFloat {
        complete == 1 ? 1 : 0
    }

    var body: some View {
        ZStack(alignment: .bottom) {
            Circle()
                .foregroundColor(pendingColor)
            progress
            Circle().strokeBorder(borderColor, lineWidth: 2)
        }
        .overlay(arrow, alignment: .center)
        .frame(width: 91, height: 91, alignment: .center)
    }

    var progress: some View {
        Rectangle()
            .fill(completeColor)
            .clipShape(Circle())
            .frame(width: 91, height: 91, alignment: .center)
            .fixedSize()
            .frame(width: 91, height: 91 * complete, alignment: .bottom)
            .clipped()
    }

    var arrow: some View {
        Arrow(complete: arrowComplete)
            .stroke(style: StrokeStyle(lineWidth: 5, lineCap: .square, lineJoin: .miter, miterLimit: 20))
            .fill(Color.white)
            .rotationEffect(.degrees(-135 * Double(arrowComplete)))
            .scaleEffect(1 - 0.1 * arrowComplete)
            .offset(x: 7 * arrowComplete, y: 0)
            .padding(21)

    }
}

struct ContentView: View {
    @State var complete: CGFloat = 1

    var body: some View {
        VStack {
            UpdatingIndicator(complete: complete)
            Slider(value: $complete, in: 0...1)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}