import { 
  OverlayTrigger, 
  Tooltip 
} from 'react-bootstrap';
import { 
  CurrencyCircleDollar,
  Package,
  Toolbox
} from '@phosphor-icons/react';

function ToggleValues( props ) {

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

  return (

    <>

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

      <div>

        <OverlayTrigger
          delay={ { hide: 100, show: 200 } }
          overlay={ ( props ) => ( 
            <Tooltip { ...props }>
              toggle the active state
            </Tooltip>
          )}
          placement="bottom"
        >

          <span onClick={ () => { toggleValue( 4, theRow ); } }>

            {active && ( <span>active</span> ) }
            {!active && ( <span><strike>inactive</strike></span> ) }


          </span>

        </OverlayTrigger>

        { " " }

        <OverlayTrigger
          delay={ { hide: 100, show: 200 } }
          overlay={ ( props ) => ( 
            <Tooltip { ...props }>
              toggle accountd access
            </Tooltip>
          )}
          placement="bottom"
        >

          <span onClick={ () => { toggleValue( 1, theRow ); } }>

            {accountd && ( <CurrencyCircleDollar className="text-success" /> ) }
            {!accountd && ( <CurrencyCircleDollar className="text-danger" /> ) }


          </span>

        </OverlayTrigger>

        { " " }

        <OverlayTrigger
          delay={ { hide: 100, show: 200 } }
          overlay={ ( props ) => ( 
            <Tooltip { ...props }>
              toggle servicd access
            </Tooltip>
          )}
          placement="bottom"
        >

          <span onClick={ () => { toggleValue( 2, theRow ); } }>

            {servicd && ( <Toolbox className="text-success" /> ) }
            {!servicd && ( <Toolbox className="text-danger" /> ) }

          </span>

        </OverlayTrigger>

        { " " }

        <OverlayTrigger
          delay={ { hide: 100, show: 200 } }
          overlay={ ( props ) => ( 
            <Tooltip { ...props }>
              toggle stockd access
            </Tooltip>
          )}
          placement="bottom"
        >

          <span onClick={ () => { toggleValue( 3, theRow ); } }>

            {stockd && ( <Package className="text-success" /> ) }
            {!stockd && ( <Package className="text-danger" /> ) }

          </span>

        </OverlayTrigger>

      </div>

    </>

  );

}

export default ToggleValues;