import { Col, Container, Row, StyleSystemThemedProps } from 'components/layout';
import { TouchableTile } from 'components/touchable-tile';
import { Text } from 'components/text';
import { ChevronRight, Community, Knowledge, Learn, Play, PlayDown, Star } from 'icons';
import { useSettings } from 'hooks';
import { Visible } from 'components/visible';
import { metrics } from 'config';
import { Divider } from 'components/divider';

const { STYLES } = metrics;

const spaces = [
  {
    id: 1,
    name: 'Community',
    icon: <Community />,
    subTitle: 'PSY 345 Summer 2021-22',
    favorite: true,
    subBlock: [
      {
        id: 2,

        name: 'Community',
        icon: <Community />,
        subTitle: 'PSY 345 Summer 2021-22',
        favorite: true,
      },
      {
        id: 4,
        name: 'Learn',
        icon: <Learn />,
        subTitle: 'PSY 345 Summer 2021-22',
        favorite: true,
      },
      {
        id: 5,
        name: 'Knowledge',
        icon: <Knowledge />,
        subTitle: 'PSY 345 Summer 2021-22',
        favorite: true,
      },
    ],
  },
  {
    id: 7,
    name: 'Learn',
    icon: <Learn />,
    subTitle: 'PSY 345 Summer 2021-22',
    favorite: true,
    subBlock: [],
  },
  {
    id: 8,
    name: 'Knowledge',
    icon: <Knowledge />,
    subTitle: 'PSY 345 Summer 2021-22',
    favorite: true,
    subBlock: [],
  },
];
const isSpaceExpanded = (is: boolean) => {
  return is ? <PlayDown colorVariant="body" /> : <Play colorVariant="caption-01" />;
};
export const AllSpace: React.FC<AllSpaceType> = ({ ...props }) => {
  const { isSideBarCollapsed } = useSettings();
  const mt = isSideBarCollapsed ? undefined : 'xs';
  const alignItems = isSideBarCollapsed ? 'center' : undefined;

  return (
    <Col {...props} alignItems={alignItems}>
      <Visible if={!isSideBarCollapsed}>
        <Text ml="m" mt="l" variant="caption" color="caption-01">
          ALL SPACES
        </Text>
      </Visible>
      <Visible if={isSideBarCollapsed}>
        <Row width={STYLES.sideBarCollapsedItemWidth / 2}>
          <Divider my="s" directionVariant="horizontal" colorVariant="divider" size={1} />
        </Row>
      </Visible>
      {spaces.map((space) => (
        <Col key={space.id}>
          <TouchableTile
            mt={mt}
            isCollapsed={isSideBarCollapsed}
            collapsedWidth={STYLES.sideBarCollapsedItemWidth}
            onPress={() => {}}
            variant="text"
            title={space.name}
            leftElement={
              <>
                <Visible if={!isSideBarCollapsed}>
                  {isSpaceExpanded(space.subBlock.length > 0)}
                </Visible>
                <Container ml={mt}>
                  <Knowledge />
                </Container>
              </>
            }
            caption={space.subTitle}
            rightElement={<Star />}
            sizeVariant="medium"
          />
          <Visible if={!isSideBarCollapsed}>
            <Container ml="xs">
              {space.subBlock.map((spaceItem) => (
                <TouchableTile
                  key={spaceItem.id}
                  mt="xs"
                  onPress={() => {}}
                  variant="text"
                  title={spaceItem.name}
                  leftElement={
                    <>
                      <Play colorVariant="caption-01" />
                      <Container ml={mt}>
                        <Knowledge />
                      </Container>
                    </>
                  }
                  caption={space.subTitle}
                  rightElement={<Star />}
                  sizeVariant="medium"
                />
              ))}
            </Container>
          </Visible>
        </Col>
      ))}
      <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>
  );
};

type AllSpaceType = StyleSystemThemedProps & {};