import { css, CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { useApphouse } from '../context/useApphouse';
import { setAlpha } from '../utils/color/setAlpha';
import {
  hint,
  hintBottom,
  hintLeft,
  hintRight,
  hintSmall
} from '../styles/defaults/hint.styles';
import React from 'react';
import { BoxSizeStyles } from '../styles/defaults/themes.interface';

/**
 * Interface for the Toolbar action items
 */
export interface ToolbarActionItem {
  /**
   * Unique id for the action item
   */
  id: string;
  /**
   * The tooltip label
   */
  ariaLabel: string;
  /**
   * Callback for when the action is clicked
   */
  onClick?: (e?: any) => void;
  /**
   * Icon to display
   */
  icon: React.ReactNode;
  /**
   * Identifies if the item is selected
   */
  selected?: boolean;
  /**
   * Style overwrites for the button
   * @optional
   */
  style?: CSSProperties;
  /**
   * The size of the toolbar button
   * @optional
   * @default "m"
   */
  size?: keyof BoxSizeStyles;
  /**
   * Render as
   * @default "button"
   * @optional
   */
  as?: string;
  /**
   * if true, it will hide the hint tooltip
   * @default false
   * @optional
   */
  hideHint?: boolean;
  /**
   * If provided the item will be rendered as this component
   */
  component?: React.ReactNode;
}

export interface ToolbarActionsProps {
  actions: ToolbarActionItem[];
  selectedId?: string;
}

export const Toolbar: React.FC<ToolbarActionsProps> = observer(
  ({ actions, selectedId }) => {
    const { theme } = useApphouse();
    const { styles, colors, tokens } = theme;
    const toolbarBackgroundStyle = {
      backgroundColor: colors.surface,
      border: `1px solid ${colors.surface}`,
      borderRadius: tokens.radius.default,
      display: 'inline-flex',
      gridGap: 0,
      margin: 0
    };
    const separator = () => (
      <div
        data-style="Toolbar.separator"
        {...css({
          width: 1,
          backgroundColor: setAlpha(colors.onSurface, 0.075)
        })}
      />
    );

    return (
      <div
        data-xray="Toolbar"
        key="toolbar-actions"
        {...css(styles.layout?.horizontal, toolbarBackgroundStyle)}
      >
        {actions.map((action, i) => {
          let hintDirectionStyle: CSSProperties = hintBottom;

          if (i === actions.length - 1) {
            // make last item have hint be on the left
            hintDirectionStyle = hintLeft;
          }
          if (i === 0) {
            // make first item have hint be on the right
            hintDirectionStyle = hintRight;
          }

          const Component = (action.as || 'button') as any;
          const hintStyles = !action.hideHint
            ? { ...hint, ...hintDirectionStyle, ...hintSmall }
            : {};
          return (
            <div
              key={`${action.id}-${i}`}
              {...css({ display: 'flex', color: colors.onSurface })}
            >
              {!action.component && (
                <Component
                  aria-label={action.ariaLabel}
                  {...css(
                    { border: 0 },
                    hintStyles,
                    styles.button.clear,
                    action.style,
                    styles.boxSize[action.size || 'm'],
                    selectedId === action.id
                      ? {
                          color: colors.brand
                        }
                      : {
                          color: 'inherit'
                        }
                  )}
                  onClick={(e: Event) => {
                    e.preventDefault();
                    e.stopPropagation();
                    action.onClick && action.onClick(e);
                  }}
                >
                  <span
                    {...css({
                      color: action.selected ? colors.brand : 'inherit'
                    })}
                  >
                    {action.icon}
                  </span>
                </Component>
              )}
              {action.component && action.component}
              {i < actions.length - 1 ? separator() : null}
            </div>
          );
        })}
      </div>
    );
  }
);