import { Col, StyleSystemThemedProps } from 'components/layout';
import { TouchableTile } from 'components/touchable-tile';
import { Text } from 'components/text';
import { Avatar } from 'components/avatar';
import { Chip } from 'components/chip';
import { Visible } from 'components/visible';
import { metrics } from 'config';
import { RoomTypeEnum, useMultipleRoomsQuery } from 'expo-schema';

const { LIMITS } = metrics;

export const Chat: React.FC<ChatType> = ({ openRoom, ...props }) => {
  const { data } = useMultipleRoomsQuery({
    variables: {
      input: {
        type: RoomTypeEnum.Chat,
        limit: LIMITS.rooms,
        offset: 0,
      },
    },
  });

  const chatRooms = data?.multipleRooms;
  const isChatRooms = chatRooms && chatRooms?.length > 0;

  return (
    <Visible if={isChatRooms}>
      <Col {...props}>
        <Text ml="xs" mt="m" mb="2xs" variant="caption" color="caption-01">
          CHAT ROOMS
        </Text>
        {chatRooms?.map((room) => (
          <Col key={room.id}>
            <TouchableTile
              mt="3xs"
              onPress={() => openRoom(room.id)}
              variant="text"
              px="xs"
              title={room.name as string}
              leftElement={
                <Avatar
                  size={24}
                  colorVariant="base-01"
                  shapeVariant="square"
                  title={room.name as string}
                />
              }
              rightElement={
                <Visible if={false}>
                  <Chip
                    titleColor="white"
                    variant="plain"
                    sizeVariant="extra-small"
                    colorVariant="secondary"
                    title={room.countMembers?.toString()}
                  />
                </Visible>
              }
              sizeVariant="large"
            />
          </Col>
        ))}
      </Col>
    </Visible>
  );
};

type ChatType = StyleSystemThemedProps & ChatProps;

interface ChatProps {
  openRoom: (id: string) => void;
}