import ConfigurableIcon from '../display/ConfigurableIcon';

function ToggleValues( props ) {

  let {
    theRow,
    toggleValue
  } = props;
  let {
    accountd,
    active,
    stockd,
    servicd
  } = theRow;

  return (

    <>

      <div className="size-65">status</div>

      <div className="floats">

        <ConfigurableIcon
          customClassName={active ? 'float-left mr-05 text-success' : 'float-left mr-05 text-danger'}
          iconName="Check"
          onClick={ () => { toggleValue( 4, theRow ); } }
          toolTipTitle="toggle the active state"
        />

        <ConfigurableIcon
          iconName="CurrencyCircleDollar"
          customClassName={accountd ? 'float-left mr-05 text-success' : 'float-left mr-05 text-danger'}
          onClick={ () => { toggleValue( 1, theRow ); } }
          toolTipTitle="toggle accountd access"
        />

        <ConfigurableIcon
          iconName="Toolbox"
          customClassName={servicd ? 'float-left mr-05 text-success' : 'float-left mr-05 text-danger'}
          onClick={ () => { toggleValue( 2, theRow ); } }
          toolTipTitle="toggle servicd access"
        />

        <ConfigurableIcon
          iconName="Package"
          customClassName={stockd ? 'float-left mr-05 text-success' : 'float-left mr-05 text-danger'}
          onClick={ () => { toggleValue( 3, theRow ); } }
          toolTipTitle="toggle stockd access"
        />  

      </div>

    </>

  );

}

export default ToggleValues;