From 135943b9169829be24778c0041c1753c73bdeee7 Mon Sep 17 00:00:00 2001
From: Nuary Pradipta <nuary.pradipta@gmail.com>
Date: Thu, 6 Oct 2022 17:39:42 +0700
Subject: [PATCH] Add Emoji Picker Theme

---
 .../Orbis/FloatingChat/ChatToolbar.tsx        | 23 +++++++++++--------
 .../@shared/Orbis/FloatingChat/index.tsx      | 14 ++++++++++-
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
index 0a133e736..e2c162d9c 100644
--- a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
+++ b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
@@ -1,17 +1,18 @@
-import React, { useEffect, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import styles from './ChatToolbar.module.css'
 import SendIcon from '@images/send.svg'
 import EmojiIcon from '@images/emoji.svg'
 import Input from '@shared/FormInput'
 import { useOrbis } from '@context/Orbis'
 import dynamic from 'next/dynamic'
-import EmojiPicker, {
-  EmojiClickData,
-  EmojiStyle,
-  Theme
-} from 'emoji-picker-react'
+import Picker, { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
 
-export default function ChatToolbar() {
+interface ChatToolbarProps {
+  mode: boolean
+}
+
+const ChatToolbar: FC<ChatToolbarProps> = ({ mode }) => {
+  console.log('THEME', mode)
   const { orbis, conversationId } = useOrbis()
   const [content, setContent] = useState<string>('')
   const [showPicker, setShowPicker] = useState(false)
@@ -53,7 +54,7 @@ export default function ChatToolbar() {
             size="small"
             placeholder="Type Message"
             value={content}
-            onInput={(e) => setContent(e.target.value)}
+            onChange={(e: any) => setContent(e.target.value)}
           />
           <button
             className={styles.button}
@@ -71,10 +72,10 @@ export default function ChatToolbar() {
         {showPicker && (
           <Picker
             onEmojiClick={onEmojiClick}
-            theme={Theme.DARK}
+            theme={mode ? Theme.DARK : Theme.LIGHT}
             emojiStyle={EmojiStyle.NATIVE}
             autoFocusSearch={false}
-            lazyLoadEmojis={true}
+            lazyLoadEmojis={false}
             width={324}
             height={400}
           />
@@ -83,3 +84,5 @@ export default function ChatToolbar() {
     </div>
   )
 }
+
+export default ChatToolbar
diff --git a/src/components/@shared/Orbis/FloatingChat/index.tsx b/src/components/@shared/Orbis/FloatingChat/index.tsx
index a3f62b0dc..fb726a6e9 100644
--- a/src/components/@shared/Orbis/FloatingChat/index.tsx
+++ b/src/components/@shared/Orbis/FloatingChat/index.tsx
@@ -88,6 +88,18 @@ export default function FloatingChat() {
     }
   }, [conversationId])
 
+  const [mode, setMode] = useState(true)
+
+  const storage: boolean =
+    window !== undefined
+      ? window.localStorage.getItem('oceanDarkMode') === 'true'
+      : false
+
+  useEffect(() => {
+    console.log(storage)
+    setMode(storage)
+  }, [storage])
+
   return (
     <div className={`${styles.wrapper} ${!convOpen && styles.isClosed}`}>
       <div className={styles.floating}>
@@ -151,7 +163,7 @@ export default function FloatingChat() {
               </button>
             </div>
             <Conversation messages={messages} />
-            <ChatToolbar />
+            <ChatToolbar mode={mode} />
           </div>
         )}
       </div>