import React from 'react';
import { ToolbarGroupWrapper } from './StyledToolbar';
import ToolbarItem from './ToolbarItem';
import type { ToolbarItemProps } from './ToolbarItem';
import { useDeprecation } from '../../utils/hooks';

/**
 * @deprecated Use 'right' instead.
 */
type DeprecatedAlign = 'left' | 'center';

type ValidAlign = 'right';

export interface ToolbarGroupProps {
  /**
   * List of action items in the toolbar group.
   */
  items?: ToolbarItemProps[];
  /**
   * Alignment of the items in the group.
   *
   * ⚠️ 'left' | 'center' alignments are deprecated and will be removed in the next major release. Please use 'right' instead.
   */
  align: ValidAlign | DeprecatedAlign;
  /**
   * If true, indicates that the ToolbarGroup is accessible to screen readers.
   */
  accessible?: boolean;
}

const ToolbarGroup = ({
  align = 'right',
  items = [],
  accessible,
}: ToolbarGroupProps) => {
  useDeprecation(
    "Toolbar's align prop is deprecated for 'left' and 'center' alignment. Please use 'right' instead.",
    align !== 'right'
  );

  return (
    <ToolbarGroupWrapper align={align} accessible={accessible}>
      {items.map(({ label, icon, onPress, disabled, intent }) => (
        <ToolbarItem
          key={`${label}-${icon}`}
          label={label}
          icon={icon}
          intent={intent}
          onPress={onPress}
          disabled={disabled}
        />
      ))}
    </ToolbarGroupWrapper>
  );
};

export default ToolbarGroup;