import { ReactNode } from 'react';

import { useTestIdAttribute } from '../../hooks/useTestIdAttribute';
import { CommonProps } from '../../types';
import { assertEmptyObject } from '../../utils/assertEmptyObject';

import { ToolbarContextProvider } from './contexts/ToolbarContext';
import { StyledToolbar } from './styled';

/** Props for {@link Toolbar} */
export interface ToolbarProps<T extends string> extends CommonProps {
  /** Name of {@link ToolbarPanel} that should be visible */
  activePanel: T;
  children: ReactNode;
}

/**
 * Component that allow to show rows of buttons and support animation change between multiple
 * rows.
 *
 * ```tsx
 * import { Toolbar, ToolbarPanel, Button } from 'ui-kit';
 *
 * <Toolbar activePanel="default">
 *   <ToolbarPanel name="default">
 *     <ToolbarButton>Import</ToolbarButton>
 *     <ToolbarButton>Add manually</ToolbarButton>
 *     <ToolbarButton>New group</ToolbarButton>
 *   </ToolbarPanel>
 *   <ToolbarPanel name="selectedRows">
 *     <ToolbarButton>Merge</ToolbarButton>
 *     <ToolbarButton>Export</ToolbarButton>
 *     <ToolbarButton>Share with subaccounts</ToolbarButton>
 *     <ToolbarButton>Delete</ToolbarButton>
 *   </ToolbarPanel>
 * </Toolbar>
 * ```
 */
export function Toolbar<T extends string>(props: ToolbarProps<T>) {
  const { children, activePanel, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();

  return (
    <ToolbarContextProvider activePanel={activePanel}>
      <StyledToolbar
        aria-describedby={ariaDescribedBy}
        className={className}
        role="toolbar"
        {...{ [testIdAttribute]: testId }}
      >
        {children}
      </StyledToolbar>
    </ToolbarContextProvider>
  );
}