import React, { useCallback } from 'react';

import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { StyledEngineProvider } from '@mui/material/styles';

import { bem } from 'utils/bem';

import { THEME } from '../../constants';
import { SegmentedButtonGroupProps } from './types';

import styles from './segmented-button-group.scss';

export const segmentedButtonClassName = bem(styles, 'segmented-button');

export const SegmentedButtonGroup = <T extends number | string>({
  value,
  onChange,
  className,
  children,
  theme = THEME.light,
  dataAttributes,
}: React.PropsWithChildren<SegmentedButtonGroupProps<T>>): JSX.Element => {
  const changeHandler = useCallback(
    (event: React.MouseEvent<HTMLElement>, newValue: T[]) => {
      onChange(newValue);
    },
    [onChange],
  );

  return (
    <StyledEngineProvider injectFirst>
      <ToggleButtonGroup
        {...dataAttributes}
        value={value}
        className={segmentedButtonClassName(null, { [theme]: true }, className)}
        onChange={changeHandler}
      >
        {children}
      </ToggleButtonGroup>
    </StyledEngineProvider>
  );
};