From 035a8476a874b62eaab69ee7b91e4ab54531d7bd Mon Sep 17 00:00:00 2001
From: Guilherme Girotto <guiga741@gmail.com>
Date: Sun, 14 Nov 2021 14:28:15 -0300
Subject: [PATCH] Adds Memo Creation CTA Empty State - closes #220

---
 lib/application/constants/dimensions.dart     |   6 ++
 lib/application/constants/strings.dart        |   2 +
 .../update/update_collection_memos.dart       | 101 +++++++++++++++++-
 3 files changed, 108 insertions(+), 1 deletion(-)

diff --git a/lib/application/constants/dimensions.dart b/lib/application/constants/dimensions.dart
index 9c4db8ae6..8626aeb43 100644
--- a/lib/application/constants/dimensions.dart
+++ b/lib/application/constants/dimensions.dart
@@ -75,3 +75,9 @@ const double tagsRemoveIconSize = 12;
 // Terminal Window
 //
 const double terminalWindowHeaderHeight = 64;
+
+//
+// Create Memo CTA
+//
+const double createMemoCtaSide = 64;
+const double createMemoCtaButtonStrokeWidth = 3;
diff --git a/lib/application/constants/strings.dart b/lib/application/constants/strings.dart
index 6b57b1c21..1c66c3cc1 100644
--- a/lib/application/constants/strings.dart
+++ b/lib/application/constants/strings.dart
@@ -85,6 +85,8 @@ const remove = 'Remover';
 const removeMemoTitle = 'Remover Memo';
 const removeMemoMessage = 'Você tem certeza que deseja remover este memo?';
 
+const newMemo = 'Novo Memo';
+
 //
 // Tags Component
 //
diff --git a/lib/application/pages/home/collections/update/update_collection_memos.dart b/lib/application/pages/home/collections/update/update_collection_memos.dart
index e6d73a885..d4f62badc 100644
--- a/lib/application/pages/home/collections/update/update_collection_memos.dart
+++ b/lib/application/pages/home/collections/update/update_collection_memos.dart
@@ -1,8 +1,107 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:layoutr/common_layout.dart';
+import 'package:memo/application/constants/dimensions.dart' as dimens;
+import 'package:memo/application/constants/images.dart' as images;
+import 'package:memo/application/constants/strings.dart' as strings;
+import 'package:memo/application/theme/theme_controller.dart';
 
 class UpdateCollectionMemos extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return Container(color: Colors.blue, child: Center(child: Text('Memos')));
+    return _CreateMemoEmptyState(
+      onTap: () {
+        print("teste");
+      },
+    );
   }
 }
+
+/// An empty state CTA to add a new `Memo` to a `Collection`.
+class _CreateMemoEmptyState extends ConsumerWidget {
+  const _CreateMemoEmptyState({this.onTap});
+
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = useTheme(ref);
+    final textTheme = Theme.of(context).textTheme;
+
+    return Material(
+      child: InkWell(
+        onTap: onTap,
+        child: Ink(
+          decoration: BoxDecoration(
+            border: Border.all(color: theme.neutralSwatch.shade700, width: dimens.genericBorderHeight),
+            borderRadius: dimens.executionsTerminalBorderRadius,
+            color: theme.neutralSwatch.shade800,
+          ),
+          child: Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                CustomPaint(
+                  size: const Size(dimens.createMemoCtaSide, dimens.createMemoCtaSide),
+                  painter: _CreateButtonPainter(
+                    backgroundColor: theme.primarySwatch.shade400,
+                    createColor: theme.neutralSwatch.shade800,
+                  ),
+                ),
+                context.verticalBox(Spacing.small),
+                Text(
+                  strings.newMemo.toUpperCase(),
+                  style: textTheme.button?.copyWith(color: theme.primarySwatch.shade400),
+                  textAlign: TextAlign.center,
+                )
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _CreateButtonPainter extends CustomPainter {
+  _CreateButtonPainter({required this.backgroundColor, required this.createColor});
+
+  final Color backgroundColor;
+  final Color createColor;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final backgroundPaint = Paint()..color = backgroundColor;
+    final bounds = Rect.fromLTWH(0, 0, size.width, size.height);
+
+    final backgroundCircle = Path()
+      ..addOval(
+        Rect.fromCircle(
+          center: bounds.center,
+          radius: bounds.height / 2,
+        ),
+      );
+
+    canvas.drawPath(backgroundCircle, backgroundPaint);
+
+    final stripsPainter = Paint()
+      ..color = createColor
+      ..strokeWidth = dimens.createMemoCtaButtonStrokeWidth
+      ..style = PaintingStyle.fill
+      ..strokeCap = StrokeCap.round;
+
+    final xCenter = size.width / 2;
+    final yCenter = size.height / 2;
+
+    final xQuarter = size.width / 3.5;
+    final yQuarter = size.height / 3.5;
+
+    canvas
+      ..drawLine(Offset(xCenter, yQuarter), Offset(xCenter, size.height - yQuarter), stripsPainter)
+      ..drawLine(Offset(xQuarter, yCenter), Offset(size.width - xQuarter, yCenter), stripsPainter);
+  }
+
+  @override
+  bool shouldRepaint(_CreateButtonPainter oldDelegate) =>
+      backgroundColor != oldDelegate.backgroundColor || createColor != oldDelegate.createColor;
+}