neetshin/opelete

import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon as Fa } from '@fortawesome/react-fontawesome';
import { inject, observer } from 'mobx-react';
import * as React from 'react';
import { browser } from 'webextension-polyfill-ts';
import { Operator } from '../../opelete/operators';
import { stores } from '../stores';
import { Button } from './Button';

interface Props {
  storage?: typeof stores.storage;
  operator: Operator;
}

@inject('storage')
@observer
export class OperatorCard extends React.Component<Props> {

  private handleClick = () => {
    const { storage, operator } = this.props;

    if (!storage || !storage.operatorBlacklist) {
      return;
    }

    if (storage.operatorBlacklist.includes(operator.id)) {
      storage!.removeOperatorsFromBlacklist(operator.id);
    } else {
      storage!.addOperatorsToBlacklist(operator.id);
    }
  }

  public render () {
    const { storage, operator } = this.props;

    if (!storage) {
      return null;
    }

    const isHidden = !!(storage.operatorBlacklist && storage.operatorBlacklist.includes(operator.id));

    return (
      <div className={`operator-list-item ${isHidden ? 'operator-list-item--hidden' : ''}`}>
        <Button
          className='operator-list-item__hide-button'
          text={browser.i18n.getMessage('preference_manageOperators__excludeOperator')}
          onClick={this.handleClick}
        >
          <Fa icon={isHidden ? faEyeSlash : faEye} />
        </Button>

        <div className='operator-list-item__meta'>
          <h3 className='operator-list-item__operator'>
            {operator.operator}
          </h3>

          <p className='operator-list-item__description'>
            {operator.description}
          </p>
        </div>
      </div>
    );
  }

}