import React, { FunctionComponent } from 'react';

import { ToggleButton } from '@material-ui/lab';
import { ToggleGroupProps } from './types';
import { useTheme } from '../Theme';
import { StyleToggleButton } from './styled-component';

export const ToggleButtonGroupComponent: FunctionComponent<ToggleGroupProps> = (props): React.ReactElement => {
  const {
    numberOfBtns,
    value,
    valueOfBtns,
    onChange,
    ariaLabeslOfBtns,
    ariaLabel = '',
    icons,
    showOnlyIcons,
    className = '',
    textColor = 'gray50',
    backgroundColor = 'gray',
    borderColor,
    textColorSelected = 'gray',
    backgroundColorSelected = 'gray50',
    borderColorSelected,
    isOpacityBackgroundColorSelected = false,
    style,
  } = props;

  const theme = useTheme();
  return (
    <StyleToggleButton
      $theme={theme}
      value={value}
      onChange={onChange}
      className={className}
      aria-label={ariaLabel}
      $textColor={textColor}
      $backgroundColor={backgroundColor}
      $borderColor={borderColor}
      $textColorSelected={textColorSelected}
      $backgroundColorSelected={backgroundColorSelected}
      $borderColorSelected={borderColorSelected}
      $isOpacityBackgroundColorSelected={isOpacityBackgroundColorSelected}
      style={style}
    >
      {numberOfBtns.map((item: number) => {
        return (
          <ToggleButton key={item} value={valueOfBtns[item]} aria-label={ariaLabeslOfBtns?.[item]}>
            {icons?.[item]}
            {showOnlyIcons ? <></> : valueOfBtns[item]}
          </ToggleButton>
        );
      })}
    </StyleToggleButton>
  );
};
