import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { Button } from 'react-bootstrap';
import type { ComponentBaseProps } from '../../types';

const CLASS_NAME = 'HiddenCount';

export interface Props extends ComponentBaseProps {
    style?: React.CSSProperties;
    doubleChevron?: boolean;
    expanded?: boolean;
    hiddenCount: number;
    showExpander?: boolean;
    disabled?: boolean;
    onClick?: () => void;
}

/**
 * HiddenCount is an actionable UI element that shows a count of hidden items as well as an expand actionable glyph.
 *
 * @type molecule
 * @status live
 * @tags utilities
 */

export const HiddenCount: React.FC<Props> = ({
    className,
    style,
    testId = CLASS_NAME,
    showExpander,
    doubleChevron,
    expanded = false,
    hiddenCount,
    disabled,
    onClick,
}) => (
    <div className={cx(CLASS_NAME, className)} style={style} data-testid={testId}>
        <Button
            className={`${CLASS_NAME}-button`}
            disabled={!showExpander || disabled}
            data-testid={`${CLASS_NAME}-button`}
            variant="control"
            onClick={onClick}
        >
            {!expanded && hiddenCount > 0 && <>+{hiddenCount}</>}

            {showExpander && (
                <div>
                    {doubleChevron ? (
                        <GlyphIcon
                            testId={`${CLASS_NAME}-icon`}
                            name={expanded ? 'doubleChevronUp' : 'doubleChevronDown'}
                            size={12}
                        />
                    ) : (
                        <GlyphIcon
                            testId={`${CLASS_NAME}-icon`}
                            name={expanded ? 'chevronUp' : 'chevronDown'}
                            size={16}
                        />
                    )}
                </div>
            )}
        </Button>
    </div>
);