import { Col, Container, Row, StyleSystemThemedProps } from 'components/layout';
import { TouchableTile } from 'components/touchable-tile';
import { Text } from 'components/text';
import { ChevronLeft } from 'icons';
import { Visible } from 'components';
import { metrics } from 'config';
import { RoomTypeEnum, useMultipleRoomsQuery } from 'expo-schema';
const { LIMITS } = metrics;

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

  const postRooms = data?.multipleRooms;

  const isPostRooms = postRooms && postRooms?.length > 0;

  return (
    <Visible if={isPostRooms}>
      <Col {...props}>
        <Text ml="m" mt="m" variant="caption" color="caption-01">
          POST ROOMS
        </Text>
        {postRooms?.map((room) => (
          <Col key={room.id}>
            <TouchableTile
              mt="xs"
              onPress={() => openRoom(room?.id)}
              variant="text"
              title={room.name as string}
              sizeVariant="medium"
            />
          </Col>
        ))}
        <TouchableTile
          mt="xs"
          onPress={() => {}}
          variant="text"
          title="View All"
          centerElement={
            <Row alignItems="center">
              <Container>
                <ChevronLeft height={12} />
              </Container>
              <Text ml="2xs" variant="body" color="caption-01">
                Show Less
              </Text>
            </Row>
          }
          titleColor="caption-01"
          sizeVariant="small"
        />
      </Col>
    </Visible>
  );
};

type AllSpaceType = StyleSystemThemedProps & GroupProps;
interface GroupProps {
  openRoom: (id: string) => void;
}