/* ViewMore.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./ViewMore.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useEffect, useRef } from 'react';
import { useIntl } from 'react-intl';
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
import { ButtonItem, Section } from '@atlaskit/menu';
import { Text } from '@atlaskit/primitives/compiled';
import { toolbarInsertBlockMessages } from '../../messages/insert-block';
const styles = {
  iconContainer: "_1e0c1txw _4cvr1h6o _1bah1h6o _1bsbzwfg _4t3i1tcg _2hwx1b66",
  buttonContent: "_zulputpp _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o"
};
export const ViewMore = ({
  onViewMore,
  focus
}) => {
  const ref = useRef(null);
  const {
    formatMessage
  } = useIntl();
  useEffect(() => {
    if (ref.current && focus) {
      ref.current.focus();
    }
  }, [focus]);
  return /*#__PURE__*/React.createElement(Section, {
    hasSeparator: true
  }, /*#__PURE__*/React.createElement(ButtonItem, {
    onClick: onViewMore,
    "aria-label": formatMessage(toolbarInsertBlockMessages.viewMoreAriaLabel),
    "data-testid": "view-more-elements-item",
    ref: ref
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.buttonContent])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.iconContainer])
  }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
    label: "",
    spacing: "spacious"
  })), /*#__PURE__*/React.createElement(Text, null, formatMessage(toolbarInsertBlockMessages.viewMore)))));
};