import { Messy } from '@vokhuyet/react-native-messy';

// ...
    const [list, setList] = useState([]);

    <Messy
       messages={list}
        loading={isLoading}
        BaseModule={{
          Cache: CacheDimension,
          Image: ChatListImage,
          Text: AppText,
        }}
        renderLoading={renderLoading}
        renderMessageSystem={ChatListMessageSystem}
        listProps={{
          onEndReached,
          ListHeaderComponent: ChatListHeader,
        }}
        messageProps={{
          hideOwnerAvatar: true,
          hidePartnerAvatar: false,
          onPress: onPressMessage,
          onLongPress: onLongPressMessage,
        }}
        user={{id: account?.user?.id}}
        footerProps={{
          onSend,
          ExtraLeft: <ChatListExtraLeft />,
          ExtraActionLeft: <ChatListExtraActionLeft />,
        }}
    />

  name: string;
  image: ImageProps['source'];
  latitude: string;
  longitude: string;

  id?: string | number | null;
  text?: string;
  image?: ImageSourcePropType;
  video?: { uri: string };
  audio?: {uri: string}; // not implemented, you can implement by yourself
  location?: TMessyMessageLocation;
  user?: TUser;
  type?: 'system' | 'message';
  createdTime?: Date | number | string;
  status?: 'sending' | 'sent' | 'seen';
  seenBy?: TUser[];
  local?: Asset;
  clientId?: string; // used for display message in List before receiving response from Server
  category?: string; // used for display multiple type of system message

  background: string;
  primary: string;
  accent: string;
  placeholder: string;
  shadow: string;
  success: string;
  message_left: {
    background: string;
    text: string;
    link: string;
    email: string;
    phone: string;
    audio: string;
  };
  message_right: {
    background: string;
    text: string;
    link: string;
    email: string;
    phone: string;
    audio: string;
  };
  input: {
    text: string; //text color in TextInput
  };

  id: string | number | null | undefined;
  userName?: string | null;
  avatar?: ImageSource;

  onSend?: (message?: TMessyMessage) => Promise<void> | void;
  inputProps?: TextInputProps;
  ExtraLeft?: React.ReactNode;
  ExtraActionLeft?: React.ReactNode;
  renderFooter?: FC<TMessyFooterProps>;

  hideOwnerAvatar: boolean;
  hidePartnerAvatar: boolean;
  onPress?: (message: TMessyMessageProps) => Promise<void> | void;
  onLongPress?: (message: TMessyMessageProps) => Promise<void> | void;

  Image?: FC<ImageProps>;
  Text?: FC<TextProps>;
  Video?: FC;
  Cache: {
    get: (key: string) => any;
    set: (key: string, value: any) => void;
  };