import { useContext } from "react";
import classNames from "classnames";

import { TabContext } from "utils/contexts/tab";

function slugify(tabName) {
  return tabName.toString().replace(/\s+/g, "-").toLowerCase();
}

export function slugifyAndEncode(tabName) {
  return tabName !== undefined ? encodeURIComponent(slugify(tabName)) : "";
}

export default function Tab({ tab }) {
  const { activeTab, setActiveTab } = useContext(TabContext);

  const matchesTab = decodeURI(activeTab) === slugify(tab);

  return (
    <li
      key={tab}
      role="presentation"
      className={classNames("text-theme-700 dark:text-theme-200 relative h-10 w-full rounded-md flex")}
    >
      <button
        id={`${tab}-tab`}
        type="button"
        role="tab"
        aria-controls={`#${tab}`}
        aria-selected={matchesTab ? "true" : "false"}
        className={classNames(
          "w-full rounded-md m-1",
          matchesTab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
        )}
        onClick={() => {
          setActiveTab(slugifyAndEncode(tab));
          window.location.hash = `#${slugifyAndEncode(tab)}`;
        }}
      >
        {tab}
      </button>
    </li>
  );
}