import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import { Switch } from 'react-materialize';
import './Flow.css';
import CashFlow from "./CashFlow";
import WorkFlow from "./WorkFlow";

const Flow = (props) => {
  const [flowType, setFlowType] = useState('cash');

  return (
    <div className="container">
      <div className='switch-box'>
        <Switch
          offLabel="Cash"
          onChange={(e) => setFlowType(e.target.checked === true ? 'work' : 'cash')}
          onLabel="Work"
        />
      </div>

      { flowType === 'cash' && <CashFlow /> }
      { flowType === 'work' && <WorkFlow /> }

    </div>
  );
}

export default withRouter(Flow);