import React from "react";
import * as Tabs from "@radix-ui/react-tabs";
import useControllableState from "~/hooks/useControllableState";
import { ScoreCategories } from "~/types/score-categories";
import { RootProps } from "./types";
import { RootElementContext } from "./context";

export const Root = ({ options, onChange, children }: RootProps) => {
  const [currentTab, setCurrentTab] = useControllableState<
    ScoreCategories,
    "tabs"
  >({
    controlledValue: options.currentTab,
    onChange: {
      func: onChange,
      key: "tabs",
    },
    defaultValue: options.defaultTab || "commute",
  });

  return (
    <RootElementContext.Provider value={{ ...options, currentTab }}>
      <Tabs.Root
        value={currentTab}
        orientation="vertical"
        defaultValue={currentTab}
        onValueChange={(e) => setCurrentTab(e as ScoreCategories)}
      >
        {children}
      </Tabs.Root>
    </RootElementContext.Provider>
  );
};

// Export children
export { Content, Title, Icon } from "./Content";
export { Tabs } from "./Tabs";