import React from 'react';
import type { ReactNode } from 'react';
import classNames from 'classnames';

import { Toolbar as CoreToolbar, type ToolbarProps as CoreToolbarProps } from '@shoptet/ui-core-web';
import type { SafePick } from '@shoptet/utils';

import { ToolbarGroup } from './ToolbarGroup';

export type { ToolbarGroupOwnProps, ToolbarGroupProps } from './ToolbarGroup';

export interface ToolbarOwnProps {
  /**
   * Accessible label for the toolbar.
   * Either `label` or `labeledBy` must be provided.
   */
  label?: string;
  /**
   * ID of an element that labels the toolbar.
   * Either `label` or `labeledBy` must be provided.
   */
  labeledBy?: string;
  /**
   * Orientation of the toolbar, controls the layout direction and overflow axis.
   * @default 'horizontal'
   */
  orientation?: 'horizontal' | 'vertical';
  children?: ReactNode;
}

export interface ToolbarProps extends ToolbarOwnProps, SafePick<CoreToolbarProps, 'ref'> {}

export const Toolbar = Object.assign(
  function Toolbar({ label, labeledBy, orientation = 'horizontal', children, ref, ...rest }: ToolbarProps) {
    return (
      <CoreToolbar
        {...rest}
        ref={ref}
        label={label}
        labeledBy={labeledBy}
        orientation={orientation}
        className={classNames('toolbar', {
          'toolbar--horizontal': orientation === 'horizontal',
          'toolbar--vertical': orientation === 'vertical',
        })}
      >
        {children}
      </CoreToolbar>
    );
  },
  {
    Group: Object.assign(ToolbarGroup, {
      displayName: 'Toolbar.Group',
    }),
  }
);