// import { TouchableOpacity, View } from "react-native"
// import { StyledText } from "../../../ui-components/styled-text/styled-text"
// import React from "react"
// import { MessageType } from "@openchat/types"
// import { DateUtils } from "@openchat/core"
// import { useKnownUsers } from "@openchat/ui"
// import { UserPhoto } from "../../user/user-photo/user-photo.component"
// import styles from "./message-forward.style"
// import { NavigationRef } from "../../../navigation/navigation.hooks"
// import { MessageAttachmentPreview } from "../message-attachment-preview/message-attachment-preview.component"

// export const MessageForward = ({ message }: { message: MessageType }) => {
//   // ---------------------------------------------------------------------------
//   // variables
//   // ---------------------------------------------------------------------------

//   const users = useKnownUsers()
//   const user = users.find(
//     (user) => user.id === (message.forward && message.forward.senderId),
//   )

//   // ---------------------------------------------------------------------------
//   // functions
//   // ---------------------------------------------------------------------------

//   function viewProfile() {
//     if (!user) return
//     NavigationRef.navigate("UserProfileModal", { user: user })
//   }

//   // ---------------------------------------------------------------------------

//   if (!message.forward || !user) return null
//   return (
//     <View style={styles.forwardPlace}>
//       {message.forward.text && (
//         <View style={styles.shareAttachment}>
//           <View style={styles.separator}></View>
//           <View style={styles.attachmentContainer}>
//             <TouchableOpacity
//               style={styles.userContainer}
//               onPress={() => viewProfile()}
//             >
//               <View>
//                 <UserPhoto user={user} size={20} />
//               </View>
//               <StyledText style={styles.userName}>{user.name}</StyledText>
//               <StyledText style={styles.userName}>{message.text}</StyledText>
//             </TouchableOpacity>

//             {/* {message.forward.attachments &&
//                 message.forward.attachments.length !== 0 && (
//                   <MessageAttachmentPreview
//                     attachments={message.forward.attachments}
//                     sender={user.lastSeenAs}
//                     date={DateUtils.createDate(message.createdAt)}
//                   />
//                 )} */}
//             <StyledText>
//               {DateUtils.messageDate(
//                 DateUtils.createDate(message.forward.createdAt),
//               )}
//             </StyledText>
//           </View>
//         </View>
//       )}

//       {message.forward.attachments &&
//         message.forward.attachments.length !== 0 && (
//           <View style={styles.attachmentContainer}>
//             <TouchableOpacity
//               style={styles.userContainer}
//               onPress={() => viewProfile()}
//             >
//               <StyledText style={styles.userName}>{user.name}</StyledText>
//               {message.forward.attachments[0].name}
//             </TouchableOpacity>

//             <MessageAttachmentPreview
//               attachments={message.forward.attachments}
//             />
//             <StyledText>
//               {DateUtils.messageDate(
//                 DateUtils.createDate(message.forward.attachments[0].createdAt),
//               )}
//             </StyledText>
//           </View>
//         )}
//     </View>
//   )
// }

import { TouchableOpacity, View } from "react-native"
import { StyledText } from "../../../ui-components/styled-text/styled-text"
import React from "react"
import { MessageType } from "@openchat/types"
import { DateUtils } from "@openchat/core"
import { useChannel, useKnownUsers } from "@openchat/ui"
import { UserPhoto } from "../../user/user-photo/user-photo.component"
import styles from "./message-forward.style"
import { NavigationRef } from "../../../navigation/navigation.hooks"
import { MessageAttachmentPreview } from "../message-attachment-preview/message-attachment-preview.component"
import { RoomUtils } from "@openchat/models"

export const MessageForward = ({ message }: { message: MessageType }) => {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const { communityId, channelId } = RoomUtils.extractIds(message.roomId)
  const channel = useChannel(channelId)
  const users = useKnownUsers()
  const roomKind = RoomUtils.channelKindToRoomKind(channel.type)
  const roomId = RoomUtils.createId({
    kind: roomKind,
    communityId: channel?.communityId,
    channelId: channel.id,
  })

  const user = users.find(
    (user) => user.id === (message.forward && message.forward.senderId),
  )

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  function viewProfile() {
    if (!user) return
    NavigationRef.navigate("UserProfileModal", { user: user })
  }

  // ---------------------------------------------------------------------------
  if (!message.forward || !user) return null
  return (
    <View style={{ flexDirection: "row" }}>
      <View style={styles.messageLine} />
      <View style={styles.showReport}>
        <View style={styles.reportPhotoWrapper}>
          <UserPhoto user={user} size={25} />
          <StyledText style={styles.userName}>{user.name}</StyledText>
          <StyledText style={styles.reportTime}>
            {DateUtils.messageDate(new Date(message.forward.createdAt))}
          </StyledText>
        </View>
        {/* {poll && (
          <StyledText style={styles.showReportText}>
            {poll && poll.title}
          </StyledText>
        )} */}
        {message.forward.text && (
          <StyledText style={styles.showReportText}>
            {message.forward.text}
          </StyledText>
        )}
        {message.forward.attachments &&
          message.forward.attachments.length > 0 && (
            <MessageAttachmentPreview
              attachments={message.forward.attachments}
            />
          )}
        <View>
          <StyledText style={styles.reportTime}>
            Posted in channel #{message.forward.channelName}
          </StyledText>
          <StyledText
            style={styles.viewMsg}
            onPress={() => {
              console.log("View Message")
            }}
          >
            View message
          </StyledText>
        </View>
      </View>
    </View>
  )
}
the issue here   const roomId = RoomUtils.createId({
    kind: roomKind,
    communityId: channel?.communityId,
    channelId: channel.id,
  }) - Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.ts(2322)