import React, { LegacyRef } from 'react';
import hyphenate from 'utils/hyphenate';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';

import s from './HeroDockItem.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface IHeroDockItemProps {
  children?: React.ReactNode;
  title: string;
  icon?: object;
  href?: string;
  onClick?: () => void;
  addService?: boolean;
  inverted?: boolean;
  selected?: boolean;
  color?: string;
  newTab?: boolean;
  className?: string;
  internalRef?: LegacyRef<HTMLLIElement> | undefined;
}

export const HeroDockItem = ({
  children,
  title,
  icon,
  href,
  onClick,
  addService,
  inverted,
  selected,
  color,
  newTab,
  className,
  internalRef,
}: IHeroDockItemProps) => {
  const tab = newTab && {
    target: '_blank',
    rel: 'noopener noreferrer',
  };

  const displayTitle = hyphenate(title);

  return (
    <li
      className={cn(s.heroDockItem, className, { inverted, addService, selected })}
      ref={internalRef}
    >
      {onClick && (
        <button onClick={onClick} className={cn(s.heroDockItem__link, 'button')}>
          <span className={cn(s.heroDockItem__icon, `color-${color}`)}>{icon}</span>
          <span
            className={s.heroDockItem__label}
            dangerouslySetInnerHTML={{ __html: displayTitle }} // eslint-disable-line
          />
        </button>
      )}
      {onClick && children}

      {!onClick && (
        <LinkWrapper
          href={href}
          className={cn(s.heroDockItem__link, 'link', `color-${color}`)}
          {...tab}
        >
          <span className={cn(s.heroDockItem__icon, `color-${color}`)}>{icon}</span>
          <span
            className={s.heroDockItem__label}
            dangerouslySetInnerHTML={{ __html: displayTitle }} // eslint-disable-line
          />
        </LinkWrapper>
      )}
    </li>
  );
};