'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {translate} from '../../utils';

import lang from '../../lang/common/index-en_US';

const MODE_ALL = 'MODE_ALL';
const MODE_SELECTED = 'MODE_SELECTED';

export class SelectedRecordsSwitcher extends React.Component<any> {
    static get MODE_ALL() {
        return MODE_ALL;
    }

    static get MODE_SELECTED() {
        return MODE_SELECTED;
    }

    static propTypes = {
        className: PropTypes.string,
        testAutomationId: PropTypes.string,
        showAllText: PropTypes.string,
        showSelectedText: PropTypes.string,
        selectedCount: PropTypes.number.isRequired,
        maxCount: PropTypes.number,
        mode: PropTypes.oneOf([MODE_ALL, MODE_SELECTED]).isRequired,
        onChange: PropTypes.func.isRequired
    };

    static defaultProps = {
        className: null,
        testAutomationId: null,
        maxCount: null,
        get showAllText() {
            return lang.SHOW_ALL;
        },
        get showSelectedText() {
            return lang.SHOW_SELECTED;
        }
    };

    getShowSelectedCounter() {
        let {selectedCount, maxCount} = this.props;
        let className = classnames({
            limitExceeded: maxCount && selectedCount > maxCount
        });
        return (
            <span className={className}>
                (
                <span data-test-automation-id="count">
                    {selectedCount}
                    {maxCount ? '/' + maxCount : null}
                </span>
                )
            </span>
        );
    }

    getShowElement(mode) {
        let clickable = this.props.mode !== mode;
        let isModeAll = mode === MODE_ALL;
        let testAutomationId = isModeAll ? 'showAllButton' : 'showSelectedButton';

        let text = isModeAll ? (
            translate(this.props.showAllText)
        ) : (
            <span>
                {translate(this.props.showSelectedText)} {this.getShowSelectedCounter()}
            </span>
        );

        if (clickable) {
            return (
                <a
                    href="#"
                    onClick={e => {
                        e.preventDefault();
                        this.props.onChange(mode);
                        return false;
                    }}
                    data-test-automation-id={testAutomationId}>
                    {text}
                </a>
            );
        }
        return (
            <strong className="text-primary" data-test-automation-id={testAutomationId}>
                {text}
            </strong>
        );
    }

    render() {
        return (
            <div
                data-test-automation-id={this.props.testAutomationId}
                className={classnames('store-selected-records-switcher', this.props.className)}>
                {this.getShowElement(MODE_ALL)}
                <span aria-hidden="true">|</span>
                {this.getShowElement(MODE_SELECTED)}
            </div>
        );
    }
}
