import React, { FC, useState, useCallback } from 'react';
import cx from 'classnames';
import { formatMessage } from '@orchard/frontend-localization';
import {
    DownDirectionArrowIcon, UpDirectionArrowIcon, Button, LoadingIndicator,
} from '@orchard/frontend-react-components';

const CLASSNAME = 'ShowMoreLess';
const CHEVRON_CLASSNAME = `${CLASSNAME}-chevron`;
export const TEST_ID = CLASSNAME;

export const TERM_MORE = 'show.more';
export const TERM_LESS = 'show.less';

export interface Props {
    className?: string;
    onMore?: Function;
    onLess?: Function;
    onClick?: Function;
    expanded?: boolean;
    isLoading?: boolean;
    onlyExpand?: boolean;
    disabled?: boolean;
}

const ShowMoreLess: FC<Props> = ({
    className, onMore, onLess, onClick, expanded = false, isLoading = false, onlyExpand = false, disabled = false
}) => {
    const [isExpanded, setExpanded] = useState(expanded);
    const handleClick = useCallback(() => {
        if (isLoading) return;

        if (onClick) onClick(isExpanded);
        if (!isExpanded && onMore) onMore();
        if (isExpanded && onLess) onLess();

        setExpanded(!isExpanded);
    }, [isExpanded, isLoading]);
    const renderContent = () => {
        if (isLoading) return <LoadingIndicator small />;

        if (isExpanded)
            return (
                <>
                    { formatMessage(TERM_LESS) }
                    <UpDirectionArrowIcon className={CHEVRON_CLASSNAME} />
                </>
            );

        return (
            <>
                { formatMessage(TERM_MORE) }
                <DownDirectionArrowIcon className={CHEVRON_CLASSNAME} />
            </>
        );
    };
    if (isExpanded && onlyExpand) {
        if (isLoading) return renderContent();
        return null;
    }

    return (
        <Button
            data-testid={TEST_ID}
            variant="link"
            className={cx(CLASSNAME, className)}
            onClick={handleClick}
            disabled={disabled}
        >
            { renderContent() }
        </Button>
    );
};

export default ShowMoreLess;