import React from 'react';
import { Card } from 'components/card';
import { Row, Col, StyleSystemThemedProps, ImageBackground, Container } from 'components/layout';
import { Text } from 'components/text';
import { Chip } from 'components/chip';
import { AvatarList } from 'components/avatar-list';
import { Star, Book, ClockFill, TeamFill, Tag } from 'icons';
import { Button } from 'components/button';
import { Divider } from 'components/divider';
import { Visible } from 'components/visible';
import { FlexDirectionVariant } from 'types/styles';

const flexDirection: Record<SpaceVariants, FlexDirectionVariant> = {
  compact: 'column',
  full: 'column',
};
const flexBasis: Record<SpaceVariants, FlexBasisVariant> = {
  compact: 'auto',
  full: 'auto',
};

export const Space: React.FC<SpaceType> = ({ spaceVariant = 'compact', ...props }) => {
  const isCompact = spaceVariant === 'compact';
  const isFull = spaceVariant === 'full';
  const bgImageHeight = spaceVariant === 'compact' ? 130 : 200;
  return (
    <Container {...props}>
      <Card overflow="hidden" variant="plain" colorVariant="base-01">
        <Container flexDirection={flexDirection[spaceVariant]}>
          <Container flexBasis={flexBasis[spaceVariant]}>
            <ImageBackground
              source={{
                uri: 'https://images.pexels.com/photos/9334434/pexels-photo-9334434.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
              }}
              width={undefined}
              flexGrow={1}
              height={bgImageHeight}
            >
              <Visible if={isFull}>
                <Row padding="s">
                  <Chip
                    leftElement={<Book />}
                    sizeVariant="small"
                    variant="plain"
                    colorVariant="base"
                    title="9:00 AM"
                  />
                  <Chip
                    leftElement={<ClockFill />}
                    ml="xs"
                    sizeVariant="small"
                    variant="plain"
                    colorVariant="base"
                    title="15 Feb,Tue"
                  />
                </Row>
              </Visible>

              <Col flex={1} justifyContent="flex-end" padding="s">
                <Text variant="title" color="white">
                  Course
                </Text>
                <Row mt="3xs">
                  <TeamFill width={18} height={18} />
                  <Text ml="2xs" variant="body" color="white">
                    Pivot Team
                  </Text>
                </Row>
              </Col>
            </ImageBackground>
          </Container>
          <Col flexBasis={flexBasis[spaceVariant]} px="s">
            <Visible if={isCompact}>
              <>
                <Row mt="m" alignItems="center" justifyContent="space-between">
                  <Row>
                    <Chip
                      leftElement={<Book />}
                      sizeVariant="small"
                      variant="plain"
                      colorVariant="base"
                      title="9:00 AM"
                    />
                    <Chip
                      leftElement={<ClockFill />}
                      ml="xs"
                      sizeVariant="small"
                      variant="plain"
                      colorVariant="base"
                      title="15 Feb,Tue"
                    />
                  </Row>
                  <Row ml="m">
                    <Star />
                  </Row>
                </Row>
                <Divider colorVariant="divider-01" mt="m" directionVariant="horizontal" size={1} />
              </>
            </Visible>

            <Row my="m" flexWrap="wrap" alignItems="center" justifyContent="space-between">
              <Row alignItems="center">
                <AvatarList
                  users={[
                    {
                      id: '34r45',
                      uri: 'https://avatars.githubusercontent.com/u/98377997',
                    },
                    {
                      id: '3r454r645',
                      uri: 'https://avatars.githubusercontent.com/u/68179593',
                    },
                    {
                      id: '3r54wer65',
                      uri: 'https://avatars.githubusercontent.com/u/39033532',
                    },
                  ]}
                />
                <Text ml="xs" variant="caption">
                  +12
                </Text>
              </Row>
              <Visible if={isCompact}>
                <Button
                  titleColor="white"
                  sizeVariant="medium"
                  colorVariant="primary"
                  hoverColorVariant="primary-hover"
                  title="Explore"
                />
              </Visible>
              <Visible if={isFull}>
                <Row ml="m">
                  <Star />
                </Row>
              </Visible>
            </Row>
            <Visible if={isFull}>
              <Text variant="body" flexShrink={1} minWidth={250} maxWidth={350}>
                Pivot is a communication and collaboration platform for communities, courses, teams,
                and projects.
              </Text>
            </Visible>
            <Visible if={isFull}>
              <Row mt="m">
                <Chip
                  leftElement={<Tag />}
                  sizeVariant="small"
                  variant="plain"
                  colorVariant="base-01"
                  title="Communications"
                />
                <Chip
                  leftElement={<Tag />}
                  ml="3xs"
                  sizeVariant="small"
                  variant="plain"
                  colorVariant="base-01"
                  title="Teams"
                />
              </Row>
            </Visible>
            <Visible if={isFull}>
              <>
                <Divider colorVariant="divider-01" mt="m" />
                <Row my="m" alignItems="center" justifyContent="space-between">
                  <Button
                    sizeVariant="medium"
                    colorVariant="primary"
                    flexGrow={1}
                    titleColor="white"
                    hoverColorVariant="primary-hover"
                    title="Join"
                  />
                  <Container width={20} />
                  <Button
                    sizeVariant="medium"
                    variant="outline"
                    flexGrow={1}
                    titleColor="title"
                    borderColorVariant="base-02"
                    hoverBorderColor="base"
                    title="Learn More"
                    hoverTitleColorVariant="body"
                  />
                </Row>
              </>
            </Visible>
          </Col>
        </Container>
      </Card>
    </Container>
  );
};

type SpaceType = StyleSystemThemedProps & SpaceProps;
export type SpaceVariants = 'compact' | 'full';
type FlexBasisVariant = 'auto' | '50%';
export interface SpaceProps {
  spaceVariant?: SpaceVariants;
}