import Link from "next/link";
import { Fragment } from "react";

import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";

import { Icon } from "../../icon";
import type { IconName } from "../../icon";
import { Skeleton } from "../../skeleton";

export type VerticalTabItemProps = {
  name: string;
  info?: string;
  icon?: IconName;
  disabled?: boolean;
  children?: VerticalTabItemProps[];
  textClassNames?: string;
  className?: string;
  isChild?: boolean;
  hidden?: boolean;
  disableChevron?: boolean;
  href: string;
  isExternalLink?: boolean;
  linkShallow?: boolean;
  linkScroll?: boolean;
  avatar?: string;
  iconClassName?: string;
  onClick?: (name: string) => void;
  isActive?: boolean;
};

const VerticalTabItem = ({
  name,
  href,
  info,
  isChild,
  disableChevron,
  linkShallow,
  linkScroll,
  ...props
}: VerticalTabItemProps) => {
  const { t } = useLocale();
  const isCurrent = useUrlMatchesCurrentUrl(href) || props?.isActive;

  return (
    <Fragment key={name}>
      {!props.hidden && (
        <>
          <Link
            onClick={(e) => {
              if (props.onClick) {
                e.preventDefault();
                props.onClick(name);
              }
            }}
            key={name}
            href={href}
            shallow={linkShallow}
            scroll={linkScroll}
            target={props.isExternalLink ? "_blank" : "_self"}
            className={classNames(
              props.textClassNames || "text-default text-sm font-medium leading-none",
              "min-h-7 hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default group flex w-64 flex-row items-center rounded-md px-3 py-2 transition",
              props.disabled && "pointer-events-none !opacity-30",
              (isChild || !props.icon) && "ml-7 w-auto ltr:mr-5 rtl:ml-5",
              !info ? "h-6" : "h-auto",
              props.className
            )}
            data-testid={`vertical-tab-${name}`}
            aria-current={isCurrent ? "page" : undefined}>
            {props.icon && (
              <Icon
                name={props.icon}
                className={classNames(
                  "mr-2 h-[16px] w-[16px] stroke-[2px] ltr:mr-2 rtl:ml-2 md:mt-0",
                  props.iconClassName
                )}
                data-testid="icon-component"
              />
            )}
            <div className="h-fit">
              <span className="flex items-center space-x-2 rtl:space-x-reverse">
                <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 truncate">
                  {t(name)}
                </Skeleton>
                {props.isExternalLink ? <Icon name="external-link" data-testid="external-link" /> : null}
              </span>
              {info && (
                <Skeleton
                  data-testid="apps-info"
                  as="p"
                  title={t(info)}
                  className="max-w-44 mt-1 truncate text-xs font-normal">
                  {t(info)}
                </Skeleton>
              )}
            </div>
            {!disableChevron && isCurrent && (
              <div className="ml-auto self-center">
                <Icon
                  name="chevron-right"
                  width={20}
                  height={20}
                  className="text-default h-auto w-[20px] stroke-[1.5px]"
                  data-testid="chevron-right"
                />
              </div>
            )}
          </Link>
          {props.children?.map((child) => (
            <VerticalTabItem key={child.name} {...child} isChild />
          ))}
        </>
      )}
    </Fragment>
  );
};

export default VerticalTabItem;