From 84314040d90bd9dd4c188840b59557a43ae6e985 Mon Sep 17 00:00:00 2001
From: Matt Bruce <matt.bruce@verizon.com>
Date: Fri, 10 May 2024 14:36:50 -0500
Subject: [PATCH] refactored tooltip for securityCode

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
---
 .../InputField/FieldTypes/SecurityCode.swift  | 70 +++++++++++++++++--
 1 file changed, 65 insertions(+), 5 deletions(-)

diff --git a/VDS/Components/TextFields/InputField/FieldTypes/SecurityCode.swift b/VDS/Components/TextFields/InputField/FieldTypes/SecurityCode.swift
index fc219044..cf60eb9a 100644
--- a/VDS/Components/TextFields/InputField/FieldTypes/SecurityCode.swift
+++ b/VDS/Components/TextFields/InputField/FieldTypes/SecurityCode.swift
@@ -7,6 +7,7 @@
 
 import Foundation
 import UIKit
+import VDSTokens
 
 extension InputField {
                     
@@ -32,14 +33,73 @@ extension InputField {
         override func updateView(_ inputField: InputField) {
             minWidth = 88.0
             isSecureTextEntry = true
-
-            let title: String = inputField.cardType.rawValue
-            let content: String = "looking for \(inputField.cardType.securityCodeLength) digits"
-            toolTipModel = .init(title: title, content: content)
-
+            toolTipModel = getToolTip(inputField)
             super.updateView(inputField)
         }
         
+        func getToolTip(_ inputField: InputField) -> Tooltip.TooltipModel {
+            
+            let surface = inputField.surface
+            
+            var contentView: UIView
+            var code3Label = Label().with {
+                $0.text = "Most credit or debit cards have a 3-digit security code on the back."
+                $0.isEnabled = true
+                $0.surface = surface
+            }
+            var code4Label = Label().with {
+                $0.text = "American Express cards have a 4-digit code on the front."
+                $0.isEnabled = true
+                $0.surface = surface
+            }
+
+            var code3ImageView = UIImageView().with {
+                $0.image = BundleManager.shared.image(for: "securityCode\(surface == .dark ? "-inverted": "")")
+            }
+            var code4ImageView = UIImageView().with {
+                $0.image = BundleManager.shared.image(for: "securityCodeAmex\(surface == .dark ? "-inverted": "")")
+            }
+            
+            func stack(_ axis: NSLayoutConstraint.Axis = .vertical) -> UIStackView {
+                UIStackView().with {
+                    $0.translatesAutoresizingMaskIntoConstraints = false
+                    $0.axis = axis
+                    $0.distribution = .fill
+                    $0.alignment = .leading
+                    $0.spacing = VDSLayout.space2X
+                }
+            }
+            
+            func view3() -> UIView {
+                stack().with {
+                    $0.addArrangedSubview(code3ImageView)
+                    $0.addArrangedSubview(code3Label)
+                }
+            }
+            
+            func view4() -> UIView {
+                stack().with {
+                    $0.addArrangedSubview(code4ImageView)
+                    $0.addArrangedSubview(code4Label)
+                }
+            }
+            
+            let title: String = inputField.cardType.rawValue
+            switch inputField.cardType {
+            case .amex:
+                contentView = view4()
+            case .generic:
+                contentView = stack(.horizontal).with {
+                    $0.addArrangedSubview(view3())
+                    $0.addArrangedSubview(view4())
+                }
+            default:
+                contentView = view3()
+            }
+        
+            return .init(contentView: contentView)
+        }
+        
         override func textField(_ inputField: InputField, textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
             // Allow only numbers and limit the length of text.
             let allowedCharacters = CharacterSet.decimalDigits