import * as React from 'react';
import { Component, ReactNode } from 'react';
import { observer } from 'mobx-react';
import { resolve } from 'inversify-react';
import { translate } from 'react-i18next';

import { SvgIcon } from 'common/svg-icon';
import { TranslationProps } from 'common/i18n';

import { LobbyStore } from '../lobby.store';
import { LobbyEntitiesCriteriaStore } from '../lobby-entities-criteria-panel/lobby-entities-criteria.store';

const icon = require('../lobby-entities-criteria-panel/images/settings-button.svg');

const MIN_ENTITIES_TO_SHOWN = 8;

@translate()
@observer
export class LobbyEntitiesCriteriaBadge extends Component<TranslationProps> {

  @resolve
  private readonly _lobbyStore: LobbyStore;

  @resolve
  private readonly _lobbyEntitiesCriteriaStore: LobbyEntitiesCriteriaStore;

  render() {
    const { filteredEntities } = this._lobbyStore;
    const { t } = this.props;

    if (filteredEntities.length < MIN_ENTITIES_TO_SHOWN) {
      return null;
    }

    return (
      <div className="lobby-entities-criteria-badge" onClick={this._lobbyEntitiesCriteriaStore.toggle}>
        {this.renderBadge()}
        <div className="lobby-entities-criteria-badge__text-label">{t('lobby-settings-sort-filter-label')}</div>
        <SvgIcon icon={icon} iconClassName="lobby-entities-criteria-badge__icon"/>
      </div>
    );
  }

  private renderBadge(): ReactNode {
    const { filteredEntities, allEntities } = this._lobbyStore;
    const { isFilterApplied } = this._lobbyEntitiesCriteriaStore;
    return (
      <div className="lobby-entities-criteria-badge__tables-counter">
        {isFilterApplied
          ? `${filteredEntities.length}/${allEntities.length}`
          : allEntities.length}
      </div>
    );
  }
}