import { FC, useCallback } from 'react';
import { GestureResponderEvent } from 'react-native';
import { Col, Row } from 'components/layout';
import { Text } from 'components/text';
import { Visible } from 'components/visible';
import { useResponsiveLayout } from 'hooks';
import { getMessageDateTime } from 'utils/dateTime';
import { AvatarList } from 'components/avatar-list';
import { Button } from 'components/button';
import { isMessageThreadOpenVar } from 'state-management/chat';

export const Replies: FC<RepliesProps> = ({ users, repliesCount }) => {
  const { isMobile } = useResponsiveLayout();

  const size = isMobile ? 18 : 22;
  const areReplies = repliesCount > 0;

  const openThread = useCallback(() => {
    isMessageThreadOpenVar(true);
  }, []);

  return (
    <Visible if={areReplies}>
      <Row alignItems="center" my="3xs">
        <AvatarList bordered users={users} size={size} shapeVariant="square" colorVariant="base" />
        <Button
          ml="xs"
          title={`${repliesCount} Replies`}
          titleColor="primary"
          onPress={openThread}
        />
        <Col ml="xs" flexShrink={1}>
          <Row alignItems="center">
            <Text variant="caption">Last Reply {getMessageDateTime(new Date())}</Text>
          </Row>
        </Col>
      </Row>
    </Visible>
  );
};

type User = { id: string; username: string; uri: string };

export interface RepliesProps {
  onHovered?: (value: boolean) => void;
  onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
  users: User[];
  repliesCount: number;
}