import { Avatar } from 'components/avatar';
import { Button } from 'components/button';
import { Col, Row } from 'components/layout';
import { Text } from 'components/text';
import { metrics } from 'config';
import { useResponsiveLayout } from 'hooks';
import { MessageFragment } from 'expo-schema';

const {
  STYLES: {
    radius: { card },
  },
} = metrics;

export const RoomCreated: React.FC<RoomCreatedProps> = ({ message }) => {
  const { userName, userProfilePhotoUrl } = message;

  const { isMobile } = useResponsiveLayout();
  const size = isMobile ? 30 : 38;
  return (
    <Row
      backgroundColor="primary-02"
      px="xs"
      justifyContent="space-between"
      alignItems="center"
      flexWrap="wrap"
      borderRadius={card}
      borderWidth={1}
      borderColor="primary-01"
    >
      <Row flexWrap="wrap" alignItems="center">
        <Avatar
          size={size}
          shapeVariant="square"
          colorVariant="base-01"
          title={userName?.first}
          uri={userProfilePhotoUrl as string}
        />
        <Col ml="xs" flexShrink={1}>
          <Row alignItems="center" justifyContent="center">
            <Text variant="body" color="title" weightVariant="medium">
              {userName?.first}
              {''} {userName?.last}
            </Text>
            <Text ml="s" variant="body" weightVariant="normal">
              create audio room
            </Text>
          </Row>
        </Col>
      </Row>
      <Button
        hoverColorVariant="primary-hover"
        my="xs"
        colorVariant="primary"
        sizeVariant="medium"
        title="Join room"
      />
    </Row>
  );
};
export interface RoomCreatedProps {
  message: MessageFragment;
}