import classnames from 'classnames'
import { useState, useEffect } from 'react'
import PerfectScrollbar from 'react-perfect-scrollbar'
import { Send } from 'react-feather'
import { Card, CardHeader, CardTitle, Form, InputGroup, Input, Button } from 'reactstrap'

import '@styles/base/pages/app-chat-list.scss'

const Notes = () => {
    const [msg, setMsg] = useState('')
    const [chatRef, setChatRef] = useState(null)
    const userNotes = [
      {
        message: "Test note here. Test note here. Test note here. Test note here. Test note here. Test note here. Test note here."
      },
      {
        message:"Test note here. Test note here. Test note here. Test note here. Test note here. Test note here. Test note here."
      },
      {
        message:"Small note text"
      },
      {
        message:"Test note here. Test note here. Test note here. Test note here. Test note here. Test note here. Test note here."
      },
      {
        message:"Test note here. Test note here. Test note here. Test note here. Test note here. Test note here. Test note here."
      },
      {
        message:"Another small note here"
      },
      {
        message:"Test note here. Test note here. Test note here. Test note here. Test note here. Test note here. Test note here"
      }
    ]
    //** Renders notes
    const renderChats = () => {
        return userNotes.map((item, index) => {
            return (
                <div
                    key={`note-${index}`}
                    className={classnames('chat', {
                        'chat-left': false
                    })}
                >
                    <div className='chat-body'>
                        <div className='chat-content'>
                            <p>{item.message}</p>
                        </div>
                    </div>
                </div>
            )
        })
    }

    //** Scroll to bottom
    const scrollToBottom = () => {
        chatRef.scrollTop = Number.MAX_SAFE_INTEGER
    }

    useEffect(() => {
        if (chatRef !== null) {
            scrollToBottom()
        }
    }, [userNotes.length])

    const handleSendMsg = e => {
        e.preventDefault()
        if (msg.trim().length) {
            const newMsg = {
                message: msg,
                time: new Date()
            }
            setMsg('')
        }
    }

    return (
        <Card className='chat-widget'>
            <CardHeader>
                <CardTitle>Notes</CardTitle>
            </CardHeader>
            <div className='chat-app-window'>
                <PerfectScrollbar
                    containerRef={el => setChatRef(el)}
                    className='user-chats scroll-area'
                    options={{ wheelPropagation: false }}
                >
                    <div className='chats'>{renderChats()}</div>
                </PerfectScrollbar>
                <Form className='chat-app-form' onSubmit={e => handleSendMsg(e)}>
                    <InputGroup className='input-group-merge mr-1 form-send-message'>
                        <Input
                            value={msg}
                            className='border-0'
                            onChange={e => setMsg(e.target.value)}
                            placeholder='Type your note'
                        />
                    </InputGroup>
                    <Button className='send' color='primary'>
                        <Send size={14} className='d-lg-none' />
                        <span className='d-none d-lg-block'>Save</span>
                    </Button>
                </Form>
            </div>
        </Card>
    )
}

export default Notes
