import { useRef, useCallback } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

import { Box, Heading, Text } from 'components/common';
import { AnchorProvider, AnchorLink, AnchorSection } from 'components/anchors';

import { ContentGroup } from './ContentGroup';
import { AnalyticsGroupFragment } from 'types/graphql';

export const AnalyticsFeed = ({
  data,
}: {
  data?: AnalyticsGroupFragment[];
}) => {
  const location = useLocation();
  const navigate = useNavigate();

  const hash = useRef(location.hash);
  const search = useRef(location.search);
  search.current = location.search;
  const pathname = useRef(location.pathname);
  pathname.current = location.pathname;

  const onSectionChange = useCallback(
    (id: string) => {
      navigate(
        { pathname: pathname.current, search: search.current, hash: '#' + id },
        { replace: true }
      );
    },
    [navigate]
  );

  if (data) {
    return (
      <AnchorProvider
        initialId={hash.current}
        onChange={onSectionChange}
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden',
        }}
      >
        <div
          className="flex flexWrap justifyCenter paddingX1 paddingY2 spacing2 bg-white shadow1"
          style={{ top: 0, zIndex: 9999 }}
        >
          {data.map((group) => {
            return (
              <AnchorLink
                id={group.name}
                className="fz14 tdn rounded2 hover1 paddingX3 paddingY1"
                activeClassName="bg-grayA01 c-blue"
                key={group.id}
              >
                {group.name}
              </AnchorLink>
            );
          })}
        </div>
        <Box
          flex="grow"
          spacingY={6}
          overflow="auto"
          style={{ paddingBottom: 100 }}
        >
          {data.map((group, i) => {
            return (
              <AnchorSection id={group.name} index={i} key={group.id}>
                <Box className="tac" padding={4} spacingY={2}>
                  <Heading size="l">{group.name}</Heading>
                  <Text size="s">{group.description}</Text>
                </Box>
                <ContentGroup data={group.charts} />
              </AnchorSection>
            );
          })}
        </Box>
      </AnchorProvider>
    );
  } else {
    return null;
  }
};

export default AnalyticsFeed;