import React, { HTMLAttributeAnchorTarget, useLayoutEffect, useState } from 'react';
import AnimateHeight from 'react-animate-height';

import { isActiveLink } from '../is-active-link';
import { SubLink, SubLinkProps } from '../SubLink/SubLink';
import { useLocation } from '../useLocation';
import { SubLinksButtonGroup } from './SubLinks.styled';

export type SubLinksProps = {
  Component?: SubLinkProps['Component'];
  onClick: () => void;
  onSubLinkClick?: (href?: string) => void;
  subLinks: {
    isNew?: boolean;
    link: string;
    target?: HTMLAttributeAnchorTarget | undefined;
    text: string;
  }[];
};
export const SubLinks: React.FunctionComponent<SubLinksProps> = ({
  Component,
  subLinks,
  onClick,
  onSubLinkClick,
}) => {
  const { pathname } = useLocation();
  const [height, setHeight] = useState<'auto' | number>(0);

  useLayoutEffect(() => {
    setHeight('auto');
  }, []);

  return (
    <AnimateHeight duration={300} easing={'ease'} height={height} id="SubLinksButtonGroup">
      <SubLinksButtonGroup data-testid="SubLinks-SubLinksButtonGroup">
        {subLinks.map(({ text, link, isNew, target }) => (
          <SubLink
            key={text}
            Component={Component}
            isActive={isActiveLink(link, [], pathname)}
            isNew={Boolean(isNew)}
            link={link}
            target={target}
            text={text}
            onClick={() => {
              onClick();
              onSubLinkClick?.(link);
            }}
          />
        ))}
      </SubLinksButtonGroup>
    </AnimateHeight>
  );
};