Untitled

const initialTabs = [
  {
    id: 1,
    label: '[Nivel uno]'
  },
  {
    id: 2,
    label: '[Nivel dos]'
  },
  {
    id: 3,
    label: '[Nivel tres]'
  },
  {
    id: 4,
    label: '[Nivel cuatro]'
  }
];

const styles = makeStyles(theme => ({
  tab: {
    width: theme.spacing(40),
    height: 42
  },
  addTabButton: {
    height: theme.spacing(8),
    color: palette.cerulean,
    textDecoration: 'underline',
    '&:hover': {
      textDecoration: 'underline'
    }
  },
  rootTab: {
    borderBottom: '2px',
    height: 42,
    "& button[aria-selected='true']": {
      color: palette.cerulean
    },
    "& button[aria-selected='false']": {
      borderBottom: `2px solid ${palette.dimGray}`
    }
  },
  tabIndicator: {
    backgroundColor: palette.cerulean
  }
}));

const useTabStyles = () => styles();

export const FormulationTabs = () => {
  const [selectedTab, setSelectedTab] = useState(0);
  const [activeTabs, setActiveTabs] = useState([initialTabs[0]]);

  const classes = useTabStyles();
  const { messages: intlMessages } = useIntl();

  const handleChange = (_, newValue) => {
    //setSelectedTab(newValue);
  };

  const handleAddTab = () => {
    if (activeTabs.length === initialTabs.length) return;

    const nextTab = initialTabs[activeTabs.length];

    setActiveTabs([...activeTabs, nextTab]);
  };

  const handleRemoveTab = index => {
    const newTabs = [...activeTabs];

    newTabs.splice(index, 1);

    setSelectedTab(newTabs.length - 1);
    setActiveTabs(newTabs);
  };

  const removeButtonVisible = activeTabs.length < 4;

  return (
    <Grid container spacing={4} alignItems="center">
      <Grid item>
        <Tabs value={selectedTab} onChange={handleChange} classes={{ indicator: classes.tabIndicator, root: classes.rootTab }}>
          {activeTabs.map((tab, index) => (
            <Tab
              key={`${Math.floor(Math.random() * new Date().valueOf())}-${tab.id}`}
              className={classes.tab}
              label={
                <FormulationTabLabel
                  isActive={selectedTab === index}
                  label={tab.label}
                  handleClickRemoveButton={index > 0 ? () => handleRemoveTab(index) : null}
                />
              }
            />
          ))}
        </Tabs>
      </Grid>
      {removeButtonVisible && (
        <Button className={classes.addTabButton} startIcon={<AddOutlined />} onClick={handleAddTab}>
          {intlMessages['common.addLevel']}
        </Button>
      )}
    </Grid>
  );
};