import React, { useContext } from 'react';
import Link from '@mui/material/Link';
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import { formatNumberAsMetric } from '@reltio/mdm-sdk';
import classnames from 'classnames';
import { mergeRight } from 'ramda';
import i18n from 'ui-i18n';
import { LabelsContext } from '../../../contexts/LabelsContext';
import { withTooltip } from '../../../HOCs/withTooltip';
import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
import { useStyles } from './styles';
var LinkWithTooltip = withTooltip(Link);
export var ProfileBandNavigationWidget = function (_a) {
    var _b;
    var className = _a.className, _c = _a.total, total = _c === void 0 ? 0 : _c, onPrev = _a.onPrev, onNext = _a.onNext, onSearchResultsClick = _a.onSearchResultsClick, isPrevDisabled = _a.isPrevDisabled, isNextDisabled = _a.isNextDisabled;
    var styles = useStyles();
    var labels = useContext(LabelsContext);
    var _d = mergeRight({
        OPEN_RESULTS: i18n.text('Go to search results'),
        SEARCH_RESULT: i18n.text('Search result'),
        SEARCH_RESULTS: i18n.text('Search results'),
        PREVIOUS_PROFILE: i18n.text('Go to previous profile'),
        NEXT_PROFILE: i18n.text('Go to next profile')
    }, (_b = labels === null || labels === void 0 ? void 0 : labels.profileBand) !== null && _b !== void 0 ? _b : {}), OPEN_RESULTS = _d.OPEN_RESULTS, SEARCH_RESULT = _d.SEARCH_RESULT, SEARCH_RESULTS = _d.SEARCH_RESULTS, NEXT_PROFILE = _d.NEXT_PROFILE, PREVIOUS_PROFILE = _d.PREVIOUS_PROFILE;
    return (React.createElement("div", { className: classnames(styles.container, className) },
        React.createElement(LinkWithTooltip, { className: styles.link, component: "button", variant: "caption", onClick: onSearchResultsClick, underline: "none", tooltipTitle: OPEN_RESULTS },
            formatNumberAsMetric(total, 1000000),
            " ",
            total === 1 ? SEARCH_RESULT : SEARCH_RESULTS),
        React.createElement(SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowLeft, "data-reltio-id": "reltio-previous-profile-button", tooltipTitle: PREVIOUS_PROFILE, onClick: onPrev, disabled: isPrevDisabled, showForDisabled: true }),
        React.createElement(SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowRight, "data-reltio-id": "reltio-next-profile-button", tooltipTitle: NEXT_PROFILE, onClick: onNext, disabled: isNextDisabled, showForDisabled: true })));
};
