import { Col, Container, Row, StyleSystemThemedProps } from 'components/layout';
import { Text, TouchableTile, Visible } from 'components';
import { ChevronRight, Community, Play, StarFill } from 'icons';
import { useProfile, useSettings } from 'hooks';
import { metrics } from 'config';
import { Divider } from 'components/divider';

const { STYLES } = metrics;

export const Favorite: React.FC<FavoriteType> = ({ ...props }) => {
  const { isSideBarCollapsed } = useSettings();
  const { profile } = useProfile();

  const mt = isSideBarCollapsed ? undefined : 'xs';
  const alignItems = isSideBarCollapsed ? 'center' : undefined;
  const favorites = profile?.favorites;

  const isFavorites = favorites && favorites?.length > 0;

  return (
    <>
      <Visible if={isFavorites}>
        <Col {...props} alignItems={alignItems}>
          <Visible if={!isSideBarCollapsed}>
            <Text ml="m" mt="l" variant="body" color="caption-01">
              FAVORITES
            </Text>
          </Visible>
          <Visible if={isSideBarCollapsed}>
            <Row width={STYLES.sideBarCollapsedItemWidth / 2}>
              <Divider my="s" directionVariant="horizontal" colorVariant="divider" size={1} />
            </Row>
          </Visible>
          {favorites?.map(({ space }) => (
            <TouchableTile
              mt={mt}
              isCollapsed={isSideBarCollapsed}
              collapsedWidth={STYLES.sideBarCollapsedItemWidth}
              key={space?.id}
              onPress={() => {}}
              variant="text"
              title={space?.name}
              leftElement={
                <>
                  <Visible if={!isSideBarCollapsed}>
                    <Play colorVariant="caption-01" />
                  </Visible>
                  <Container ml={mt}>
                    <Community />
                  </Container>
                </>
              }
              caption={space?.description}
              rightElement={<StarFill />}
              sizeVariant="medium"
            />
          ))}
          <Visible if={!isSideBarCollapsed}>
            <TouchableTile
              mt="xs"
              onPress={() => {}}
              variant="text"
              title="View All"
              centerElement={
                <Row alignItems="center">
                  <Text variant="body" color="caption-01">
                    View All
                  </Text>
                  <Container ml="xs">
                    <ChevronRight height={12} />
                  </Container>
                </Row>
              }
              titleColor="caption-01"
              sizeVariant="small"
            />
          </Visible>
        </Col>
      </Visible>
    </>
  );
};

type FavoriteType = StyleSystemThemedProps & {};