import * as React from 'react';
import * as PropTypes from 'prop-types';
import { Feature } from 'toolkit/extension/features/feature';
import { componentLookup, controllerLookup } from 'toolkit/extension/utils/ember';
import { addToolkitEmberHook } from 'toolkit/extension/utils/toolkit';
import { componentAppend } from 'toolkit/extension/utils/react';

const ToggleButton = ({ longTitle, stateField }) => {
  const accountsController = controllerLookup('accounts');
  const [isToggled, setIsToggled] = React.useState(accountsController.get(`filters.${stateField}`));

  const toggleSetting = () => {
    const current = accountsController.get(`filters.${stateField}`);
    accountsController.set(`filters.${stateField}`, !current);
    setIsToggled(!current);
  };

  return (
    <button className={`button ${!isToggled && 'button-disabled'}`} onClick={toggleSetting}>
      <i
        className={`flaticon solid ${
          stateField === 'reconciled' ? 'lock-1' : 'clock-1'
        } is-reconciled`}
      >
        {longTitle && (stateField === 'reconciled' ? ' Reconciled' : ' Scheduled')}
      </i>
    </button>
  );
};

ToggleButton.propTypes = {
  longTitle: PropTypes.bool.isRequired,
  stateField: PropTypes.string.isRequired,
};

export class ToggleTransactionFilters extends Feature {
  shouldInvoke() {
    return true;
  }

  invoke() {
    const accountHeaderProto = Object.getPrototypeOf(componentLookup('accounts/account-header'));

    addToolkitEmberHook(this, accountHeaderProto, 'didRender', this.injectButtons);
  }

  injectButtons = element => {
    const toolbarRight = $('.accounts-toolbar-right', element);
    if ($('#tk-toggle-transaction-filters', toolbarRight).length) {
      return;
    }

    componentAppend(
      <span id="tk-toggle-transaction-filters">
        <ToggleButton stateField={'reconciled'} longTitle={this.settings.enabled === '2'} />
        <ToggleButton stateField={'scheduled'} longTitle={this.settings.enabled === '2'} />
      </span>,
      toolbarRight
    );
  };
}

@@ -575,51 +575,215 @@
 nst 
-toggleSetting = () =%3E %7B%0A    const current
+observer = React.useCallback(filters =%3E %7B%0A    setIsToggled(filters.get(stateField));%0A  %7D);%0A%0A  React.useEffect(() =%3E %7B%0A    accountsController.get('filters').addObserver(stateField, observer);%0A    return ()
  =
+%3E
  acc
@@ -802,41 +802,108 @@
 ler.
-get(%60filters.$%7BstateField%7D%60
+removeObserver(stateField, observer);%0A  %7D, %5B%5D
 );%0A
+%0A
   
- 
+const toggleSetting = () =%3E %7B%0A    const filters =
  acc
@@ -922,73 +922,125 @@
 ler.
-set(%60filters.$%7BstateField%7D%60, !current);%0A    setIsToggled(!current
+get('filters');%0A    filters.set(%60propertiesToSet.$%7BstateField%7D%60, !filters.get(stateField));%0A    filters.applyFilters(
 );%0A 
@@ -2108,23 +2108,22 @@
 Field=%7B'
-reconci
+schedu
 led'%7D lo
@@ -2192,38 +2192,39 @@
 on stateField=%7B'
-schedu
+reconci
 led'%7D longTitle=

Use propertiesToSet for filters so they persist (#1708)