import React, { forwardRef } from "react";
import { getActiveClasses } from "../utility";

interface Props {
  className?: string;
  orientation?: "horizontal" | "vertical";

  // Flags
  withTransition?: boolean;
  forceActive?: boolean;
}

const MenuItemFocus = forwardRef(
  (
    { className, orientation = "vertical", withTransition, forceActive }: Props,
    ref: React.Ref<HTMLDivElement>
  ) => {
    const verticalClasses = {
      "auik-top-0 auik-bottom-0 auik-left-0": orientation === "vertical",
      "auik-w-0 group-hocus:auik-w-1":
        orientation === "vertical" && !forceActive,
      "auik-w-1": orientation === "vertical" && forceActive,
      "auik-transition-250 auik-transition-ease auik-transition-width":
        orientation === "vertical" && withTransition
    };

    const horizontalClasses = {
      "auik-h-0 group-hocus:auik-h-1 auik-bottom-0 auik-left-0 auik-right-0":
        orientation === "horizontal",
      "auik-h-0 group-hocus:auik-h-1":
        orientation === "horizontal" && !forceActive,
      "auik-h-1": orientation === "horizontal" && forceActive,
      "auik-transition-250 auik-transition-ease auik-transition-height":
        orientation === "horizontal" && withTransition
    };

    return (
      <div
        ref={ref}
        className={getActiveClasses([
          "auik-bg-blue-500 auik-absolute auik-z-10",
          className,
          {
            ...verticalClasses,
            ...horizontalClasses
          }
        ])}
      ></div>
    );
  }
);

export default {
  ParentClasses: "group auik-relative",
  Component: MenuItemFocus
};