From d21bbaf349c0ed6b74cfbb31ff85da6f472cf0a4 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Mon, 22 Aug 2022 15:15:27 -0700
Subject: [PATCH] preparing add topic buttons

---
 .../conversation/addTopic/AddTopic.jsx        | 58 ++++++++++++++++---
 .../conversation/addTopic/useAddTopic.hook.js |  3 +
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/net/web/src/session/conversation/addTopic/AddTopic.jsx b/net/web/src/session/conversation/addTopic/AddTopic.jsx
index 930d2746..69f39f71 100644
--- a/net/web/src/session/conversation/addTopic/AddTopic.jsx
+++ b/net/web/src/session/conversation/addTopic/AddTopic.jsx
@@ -1,21 +1,53 @@
 import { AddTopicWrapper } from './AddTopic.styled';
 import { useAddTopic } from './useAddTopic.hook';
-import { Input } from 'antd';
+import { Input, Menu, Dropdown } from 'antd';
 import { useRef, useState } from 'react';
 import { FontColorsOutlined, FontSizeOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons';
+import { SketchPicker } from "react-color";
 
 export function AddTopic() {
 
-  const [hint, setHint] = useState("send");
-  const msg = useRef();
+  const { state, actions } = useAddTopic();
 
+  const msg = useRef();
   const keyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       msg.current.blur();
-      console.log("SEND");
     }
   }
 
+  const picker = (
+    <Menu style={{ backgroundColor: 'unset', boxShadow: 'unset' }}>
+      <SketchPicker disableAlpha={true}
+        color={state.textColor}
+        onChange={(color) => {
+          actions.setTextColor(color.hex);
+        }} />
+    </Menu>
+  );
+
+  const sizer = (
+    <Menu>
+      <Menu.Item key={8}><div onClick={() => actions.setTextSize(8)}>Small</div></Menu.Item>
+      <Menu.Item key={14}><div onClick={() => actions.setTextSize(14)}>Medium</div></Menu.Item>
+      <Menu.Item key={20}><div onClick={() => actions.setTextSize(20)}>Large</div></Menu.Item>
+    </Menu>
+  );
+
+  const attacher = (
+    <Menu>
+      <Menu.Item key="0">
+        <div>Add Image</div>
+      </Menu.Item>
+      <Menu.Item key="1">
+        <div>Add Video</div>
+      </Menu.Item>
+      <Menu.Item key="2">
+        <div>Add Audio</div>
+      </Menu.Item>
+    </Menu>
+  );
+
   return (
     <AddTopicWrapper>
       <div class="carousel"></div>
@@ -24,9 +56,21 @@ export function AddTopic() {
             autocapitalize="none" enterkeyhint="send" onKeyDown={(e) => keyDown(e)} />
       </div>
       <div class="buttons">
-        <div class="button space"><PaperClipOutlined /></div>
-        <div class="button space"><FontSizeOutlined /></div>
-        <div class="button space"><FontColorsOutlined /></div>
+        <div class="button space">
+          <Dropdown overlay={attacher} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
+            <PaperClipOutlined />
+          </Dropdown>
+        </div> 
+        <div class="button space">
+          <Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
+            <FontSizeOutlined />
+          </Dropdown>
+        </div>
+        <div class="button space">
+          <Dropdown overlay={picker} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
+            <FontColorsOutlined />
+          </Dropdown>
+        </div>
         <div class="end">
           <div class="button"><SendOutlined /></div>
         </div>
diff --git a/net/web/src/session/conversation/addTopic/useAddTopic.hook.js b/net/web/src/session/conversation/addTopic/useAddTopic.hook.js
index 1dea7d51..6e5fefc6 100644
--- a/net/web/src/session/conversation/addTopic/useAddTopic.hook.js
+++ b/net/web/src/session/conversation/addTopic/useAddTopic.hook.js
@@ -9,6 +9,9 @@ export function useAddTopic() {
   };
 
   const actions = {
+    setTextColor: (textColor) => {
+      updateState({ textColor });
+    },
   };
 
   return { state, actions };