import React, { useState } from "react";
import PropTypes from "prop-types";
import ToggleButton from "@material-ui/lab/ToggleButton";
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import { Tooltip } from "@material-ui/core";

const NavigationButtons = ({ tabs, onTabChange }) => {
  const [selected, setSelected] = useState(tabs[0].code);

  const handleTabSelection = (_event, tabCode) => {
    setSelected(tabCode);
    onTabChange && onTabChange(tabCode);
  };

  return (
    <ToggleButtonGroup
      size="small"
      value={selected}
      exclusive
      onChange={handleTabSelection}
    >
      {tabs.map(tab => (
        <ToggleButton
          key={tab.code}
          value={tab.code}
          aria-label="navigation buttons"
          disabled={selected === tab.code}
        >
          <Tooltip title={tab.tooltip}>
            <tab.icon color="primary" />
          </Tooltip>
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
};

NavigationButtons.propTypes = {
  tabs: PropTypes.arrayOf(
    PropTypes.shape({ code: PropTypes.string.isRequired })
  ).isRequired,
  onTabChange: PropTypes.func
};

export default NavigationButtons;