import { Fab } from 'components/fab';
import { Row, StyleSystemThemedProps } from 'components/layout';
import { Mic, VideoCamera } from 'icons';
import { metrics } from 'config';
import { Dropdown } from 'components';
import { Divider } from 'components/divider';
import { AvatarList } from 'components/avatar-list';
const { STYLES } = metrics;

export const Group: React.FC<GroupType> = ({ ...props }) => {
  return (
    <Row
      flexDirection="row"
      alignItems="center"
      justifyContent="space-between"
      height={STYLES.topBarHeight}
      px="s"
      {...props}
    >
      <Dropdown
        width={100}
        placeholder="General"
        sizeVariant="small"
        value="General"
        isCompact
        variant="plain"
        dropdownVariant="text"
        titleColor="title"
        items={['General']}
        onChangeValue={() => {}}
      />
      <Row>
        <Fab
          onPress={() => {}}
          variant="plain"
          sizeVariant="medium"
          colorVariant="transparent"
          centerElement={<VideoCamera colorVariant="title" height={16} width={16} />}
        />

        <Fab
          onPress={() => {}}
          variant="plain"
          sizeVariant="medium"
          colorVariant="transparent"
          centerElement={<Mic colorVariant="title" height={16} width={16} />}
        />
        <Divider
          mx="xs"
          height={25}
          alignSelf="center"
          colorVariant="divider-02"
          directionVariant="vertical"
        />

        <Row>
          <AvatarList
            avatarCount={3}
            showExtra={true}
            variant="outline"
            shapeVariant="square"
            colorVariant="base"
            sizeVariant="extra-small"
            bordered={true}
            users={[
              {
                id: '123',
                uri: 'https://avatars.githubusercontent.com/u/98377997',
              },
              {
                id: '1234',
                uri: 'https://avatars.githubusercontent.com/u/98377997',
              },
              {
                id: '1235',
                uri: 'https://avatars.githubusercontent.com/u/98377997',
              },
              {
                id: '125335',
                uri: 'https://avatars.githubusercontent.com/u/98377997',
              },
              {
                id: '112w235',
                uri: 'https://avatars.githubusercontent.com/u/98377997',
              },
              {
                id: '96fgh1235',
                uri: 'https://avatars.githubusercontent.com/u/98377997',
              },
            ]}
          />
        </Row>
      </Row>
    </Row>
  );
};

type GroupType = StyleSystemThemedProps & {};