/* eslint-disable react-x/no-array-index-key */
import { Box, Tab, Tabs } from "@mui/material";

export interface TabWidgetOption<E> {
  label: string;
  value: E;
  visible: boolean;
  color?: string;
}

export function TabsWidget<E>(p: {
  currTab: E;
  options: TabWidgetOption<E>[];
  onTabChange: (v: E) => void;
}): React.ReactElement {
  const activeOptions = p.options.filter((v) => v.visible);

  const currTabIndex = activeOptions.findIndex((v) => v.value === p.currTab);

  const updateActiveTab = (index: number) => {
    p.onTabChange(activeOptions[index].value);
  };

  return (
    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
      <Tabs
        value={currTabIndex}
        onChange={(_ev, newVal) => {
          updateActiveTab(newVal);
        }}
      >
        {activeOptions.map((o, index) => (
          <Tab key={index} label={o.label} style={{ color: o.color }} />
        ))}
      </Tabs>
    </Box>
  );
}