import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

export class SwitcherItem extends React.PureComponent<any> {
    static contextTypes = {
        selectedId: PropTypes.string.isRequired,
        onItemClick: PropTypes.func.isRequired
    };

    static propTypes = {
        id: PropTypes.string.isRequired,
        testAutomationId: PropTypes.string,
        label: PropTypes.string.isRequired
    };

    static defaultProps = {
        testAutomationId: null
    };

    onClick = () => {
        this.context.onItemClick(this.props.id);
    };

    render() {
        const {children, id, label, testAutomationId} = this.props;

        const className = classnames('rc-switcher__item', {
            'rc-switcher__item_selected': this.context.selectedId === id
        });

        return (
            <button
                data-test-automation-id={testAutomationId}
                className={className}
                onClick={this.onClick}
                aria-label={label}>
                {children}
            </button>
        );
    }
}
