import React, { FC, useContext } from 'react';

import classNames from 'classnames';
import { ContentButtonProps, createButton } from '../button/button';
import Space from '../space';
import { ConfigContext } from '../config-provider';

export interface PageActionsProps {
  /** 页面的主要操作，支持所有 Button 属性 */
  primaryAction?: ContentButtonProps;
  /** 页面的辅助操作数组，支持所有 Button 属性 */
  secondaryActions?: ContentButtonProps[];
}

const PageActions: FC<PageActionsProps> = ({ primaryAction, secondaryActions = [] }) => {
  const { getPrefixCls } = useContext(ConfigContext);

  const prefixCls = getPrefixCls('page-actions');

  const primaryActionMarkup = primaryAction
    ? createButton(primaryAction, { type: 'primary' })
    : null;

  const secondaryActionsMarkup =
    secondaryActions.length > 0 ? (
      <Space size={16}>
        {secondaryActions.map((item, index) => (
          // eslint-disable-next-line react/no-array-index-key
          <React.Fragment key={index}>
            {createButton(item, { danger: true, type: 'primary' })}
          </React.Fragment>
        ))}
      </Space>
    ) : null;

  return (
    <div className={prefixCls}>
      <div
        className={classNames(`${prefixCls}-container`, {
          [`${prefixCls}-container-only-primary`]: secondaryActions.length === 0,
        })}
      >
        {secondaryActionsMarkup}
        {primaryActionMarkup}
      </div>
    </div>
  );
};

export default PageActions;