import { Avatar } from 'components/avatar';
import { Divider } from 'components/divider';
import { Container, Row } from 'components/layout';
import { Text } from 'components/text';
import { TouchableTile } from 'components/touchable-tile';
import { Visible } from 'components/visible';
import { useResponsiveLayout } from 'hooks';
import { ChevronDown, ChevronUp } from 'icons';
import { FC } from 'react';
import { TouchableHighlightProps } from 'react-native';

export const User: FC<UserType> = ({
  isOpen,
  isPopUp,
  user,
  caption,
  isCaption,
  isDivider,
  ...props
}) => {
  const { isMobile, isTabletSM } = useResponsiveLayout();
  const isSmall = isMobile || isTabletSM || isPopUp;
  const showDivider = isDivider !== undefined ? isDivider : !isSmall;
  const flexDirection = isSmall ? 'column' : 'row-reverse';
  const alignItems = isSmall ? undefined : 'center';
  const nameWidth = isPopUp ? 120 : undefined;
  const { profilePhoto, username } = user;
  const uri = profilePhoto ? profilePhoto : null;
  return (
    <TouchableTile
      variant="text"
      leftElement={
        <Avatar
          title={username}
          uri={uri}
          sizeVariant="extra-small"
          status="online"
          colorVariant="base-02"
          shapeVariant="square"
        />
      }
      centerElement={
        <Container flexDirection={flexDirection} alignItems={alignItems}>
          <Visible if={!isPopUp}>
            <Visible if={isCaption}>
              <Text variant="caption" color="title">
                {caption}
              </Text>
            </Visible>
          </Visible>
          <Visible if={showDivider}>
            <Divider
              mx="s"
              height={25}
              alignSelf="center"
              colorVariant="divider-02"
              directionVariant="vertical"
            />
          </Visible>
          <Row alignItems="center">
            <Text width={nameWidth} numberOfLines={2} mr="2xs" variant="title">
              {username}
            </Text>
            <Visible if={isOpen}>
              <ChevronUp colorVariant="title" />
            </Visible>
            <Visible if={!isOpen}>
              <ChevronDown colorVariant="title" />
            </Visible>
          </Row>
        </Container>
      }
      height={35}
      px="xs"
      {...props}
    />
  );
};
type UserType = TouchableHighlightProps & UserProps;
export interface UserProps {
  isOpen?: boolean;
  isPopUp?: boolean;
  user: {
    profilePhoto: string;
    username: string;
  };
  isDivider?: boolean;
  isCaption?: boolean;
  caption: string;
}