swiftui_comment-view.swift

// Vista ccon el `Textfield` para los comentarios
// y el gráfico circular
internal struct Comment: View
{
    /// ViewModel que controla el textfield y el gráfico
    @ObservedObject private var updateViewModel = UpdateViewModel()

    /// ¿Cuántos caracteres quedan para escribir?
    @State private var commentLimit = ""
    /// Valor porcentual 
    @State private var percetange: CGFloat = 0.0
    /// Color del gráfico dependiendo de la cantidad
	/// de caracteres que restan por escribir.
    @State private var commentLimitForeground = Color.secondary

    ///
    internal var body: some View
    {
        VStack(alignment: .leading, spacing: 8)
        {
            HStack(alignment: .center, spacing: 8)
            {
                Text("¿Qué tal el libro?")
                    .font(.system(size: 20, weight: .bold, design: .serif))
                
                Spacer()
                
                CircleBar(counter: $commentLimit, percentage: $percetange, color: $commentLimitForeground)
                    .frame(width: 45, height: 45)
                    .onReceive(self.updateViewModel.$commentCharactersRemaining, perform: { newLimit in
                        // Establecemos el color del gráfico en base a
                        // la cantidad de caracteres que quedan.
                        if newLimit > 15
                        {
                            self.commentLimitForeground = .secondary
                        }
                        else if newLimit <= 15 && newLimit > 5
                        {
                            self.commentLimitForeground = .orange
                        }
                        else
                        {
                            self.commentLimitForeground = .red
                        }
                        
                        // Calculamos el tamaño del gráfico
                        let wrotten = 35 - newLimit
                        self.percetange = CGFloat((35.0 - CGFloat(wrotten)) / 35.0)
                        self.commentLimit = "\(newLimit)"
                    })
            }
            .padding([ .leading, .trailing ], 24)
            .padding(.top, 16)
            
            TextField("Hasta 35 caracteres", text: self.$updateViewModel.comment)
                .font(.system(size: 20, design: .serif))
                .multilineTextAlignment(.center)
                .keyboardType(.asciiCapable)
                .padding(16)
                .background(Color(UIColor.tertiarySystemFill))
                .frame(maxWidth: .infinity)
                .cornerRadius(8)
                .padding(24)
        }
    }
}