import React from 'react';
import { Card } from 'components/card';
import { Container, Row, StyleSystemThemedProps } from 'components/layout';
import { Text } from 'components/text';
import { Avatar } from 'components/avatar';
import { ChevronDown, Bell, Calendar, Clipboard } from 'icons';
import { Fab } from 'components/fab';
import { Chip } from 'components/chip';
import { AvatarList } from 'components/avatar-list';
import { Button } from 'components/button';
import { Divider } from 'components/divider';
import { Visible } from 'components/visible';

export const Event: React.FC<EventType> = ({
  statusVariant = 'active',
  eventVariant = 'compact',
  ...props
}) => {
  const isActive = statusVariant === 'active';
  const isEnded = statusVariant === 'ended';
  const isUpcoming = statusVariant === 'upcoming';
  const isCompact = eventVariant === 'compact';
  const isFull = eventVariant === 'full';
  const containerFlexDirection = isCompact ? 'column' : 'row';
  const eventIcon = isActive ? <Calendar colorVariant="primary" /> : <Clipboard />;
  const eventIconColorVariant = isActive ? 'primary-01' : 'secondary-01';
  return (
    <Container {...props}>
      <Card variant="plain" colorVariant="base-01" sizeVariant="small">
        <Row justifyContent="space-between">
          <Row alignItems="center">
            <Avatar
              mr="xs"
              size={50}
              sizeVariant="small"
              colorVariant={eventIconColorVariant}
              icon={eventIcon}
            />
            <Text flexShrink={1} width={180} textBreakStrategy="balanced" variant="title">
              Independence Day celebrations
            </Text>
          </Row>
          <Visible if={isFull}>
            <Fab
              ml="xs"
              onPress={() => {}}
              colorVariant="transparent"
              variant="plain"
              sizeVariant="medium"
              hoverColorVariant="base-02"
              centerElement={<Bell />}
            />
          </Visible>
        </Row>

        <Text mt="m" variant="body" width={200}>
          PSY 345 Summer 2021-22 is the name
        </Text>
        <Visible if={isCompact}>
          <Divider colorVariant="divider-01" mt="m" />
        </Visible>

        <Container flexDirection={containerFlexDirection} justifyContent="space-between">
          <Row mt="m">
            <Chip sizeVariant="small" variant="plain" colorVariant="base" title="9:00 AM" />
            <Chip
              ml="xs"
              sizeVariant="small"
              variant="plain"
              colorVariant="base"
              title="15 Feb,Tue"
            />
          </Row>
          <Row mt="m" alignItems="center" justifyContent="space-between">
            <Visible if={isActive}>
              <Row alignItems="center">
                <AvatarList
                  users={[
                    {
                      id: '8e2r63h87jhbd2wft',
                      uri: 'https://avatars.githubusercontent.com/u/39033532',
                    },
                    {
                      id: '8ehbd2wft',
                      uri: 'https://avatars.githubusercontent.com/u/68179593',
                    },
                    {
                      id: '8e2r63h87wft',
                      uri: 'https://avatars.githubusercontent.com/u/98377997',
                    },
                  ]}
                />
                <Text ml="xs" variant="caption">
                  +12 going
                </Text>
              </Row>
            </Visible>
            <Visible if={isEnded}>
              <Button
                variant="outline"
                titleColor="title"
                sizeVariant="small"
                borderColorVariant="base-02"
                hoverBorderColor="body"
                title="Done"
              />
            </Visible>
            <Visible if={isUpcoming}>
              <Button
                borderColorVariant="base-02"
                variant="outline"
                titleColor="title"
                sizeVariant="small"
                hoverBorderColor="body"
                title="Start"
              />
            </Visible>
            <Visible if={isCompact}>
              <Fab
                ml="xs"
                onPress={() => {}}
                colorVariant="transparent"
                variant="plain"
                sizeVariant="small"
                hoverColorVariant="base-02"
                centerElement={<Bell />}
              />
            </Visible>
          </Row>
        </Container>
        <Visible if={isFull}>
          <>
            <Divider mt="m" colorVariant="divider-01" />
            <Row mt="m" alignItems="center" justifyContent="space-between">
              <Button
                sizeVariant="medium"
                colorVariant="primary"
                hoverColorVariant="primary-hover"
                flexGrow={1}
                titleColor="white"
                title="Going"
                rightElement={<ChevronDown colorVariant="white" />}
              />
              <Container width={20} />
              <Button
                sizeVariant="medium"
                variant="outline"
                flexGrow={1}
                titleColor="title"
                borderColorVariant="base-02"
                hoverBorderColor="body"
                title="View Details"
              />
            </Row>
          </>
        </Visible>
      </Card>
    </Container>
  );
};

type EventType = StyleSystemThemedProps & EventProps;
export type EventVariants = 'compact' | 'full';
export type EventStatus = 'active' | 'ended' | 'upcoming';
export interface EventProps {
  eventVariant?: EventVariants;
  statusVariant?: EventStatus;
}