import { FC, useCallback } from 'react';
import { Card, Container, Fab, PaginationRight, PaginationLeft, Row, Text } from 'components';
import { Pencil, Trash } from 'icons';
import { AvatarList } from 'components/avatar-list';

export const Groups: FC = () => {
  const getBackground = useCallback((index) => {
    return index % 2 === 0 ? 'base-01' : 'base-01-hover';
  }, []);

  return (
    <Container>
      <Card variant="plain" colorVariant="base-01" p="l">
        <Card
          flexDirection="row"
          variant="plain"
          height={40}
          alignItems="center"
          backgroundColor="base-01-hover"
          px="xs"
        >
          <Container flexBasis={'16.66%'}>
            <Text variant="caption">NAME</Text>
          </Container>
          <Container flexBasis={'16.66%'}>
            <Text variant="caption">ORGANIZATION</Text>
          </Container>
          <Container flexBasis={'16.66%'}>
            <Text variant="caption">TYPE</Text>
          </Container>
          <Container flexBasis={'16.66%'}>
            <Text variant="caption">ACTIVITY</Text>
          </Container>
          <Container flexBasis={'16.66%'}>
            <Text variant="caption">MEMBERS</Text>
          </Container>
          <Container flexBasis={'16.66%'}>
            <Text variant="caption"></Text>
          </Container>
        </Card>

        {[1, 2, 3, 4, 5].map((item, index) => (
          <Card
            flexDirection="row"
            variant="plain"
            height={50}
            alignItems="center"
            backgroundColor={getBackground(index)}
            px="xs"
          >
            <Container flexBasis={'16.66%'}>
              <Text variant="body" color="title">
                Courses of way
              </Text>
            </Container>
            <Container flexBasis={'16.66%'}>
              <Text variant="body" color="title">
                Meridian University
              </Text>
            </Container>
            <Container flexBasis={'16.67%'}>
              <Text variant="body" color="title">
                Course
              </Text>
            </Container>
            <Container flexBasis={'16.66%'}>
              <Text variant="body" color="title">
                Active Today
              </Text>
            </Container>
            <Container flexBasis={'16.67%'}>
              <AvatarList
                bordered
                showExtra
                users={[
                  {
                    id: '343',
                    uri: 'https://avatars.githubusercontent.com/u/98377997',
                  },
                  {
                    id: '1343',
                    uri: 'https://avatars.githubusercontent.com/u/98377997',
                  },
                  {
                    id: '343657',
                    uri: 'https://avatars.githubusercontent.com/u/98377997',
                  },
                  {
                    id: '31143',
                    uri: 'https://avatars.githubusercontent.com/u/98377997',
                  },
                ]}
              />
            </Container>
            <Row flexBasis={'16.66%'} justifyContent="center">
              <Fab
                onPress={() => {}}
                colorVariant="transparent"
                variant="outline"
                sizeVariant="medium"
                shapeVariant="round"
                centerElement={<Pencil height={14} width={14} />}
              />
              <Container mx="3xs" />
              <Fab
                onPress={() => {}}
                colorVariant="transparent"
                variant="outline"
                sizeVariant="medium"
                shapeVariant="round"
                centerElement={<Trash height={14} width={14} />}
              />
            </Row>
          </Card>
        ))}
      </Card>
      <Row mt="l" justifyContent="space-between">
        <PaginationLeft activePage={1} pages={10} />
        <PaginationRight totalPages={100} pageStart={1} pageEnd={10} />
      </Row>
    </Container>
  );
};