export const InvoiceForm = ({isCreatingInvoice, setIsCreatingInvoice, invoiceID}) => {
    const [alert, setAlert] = useState(null);

    const animation1 = 'animated slideInRight faster';
    const alertClasses = useAlertStyles();

    function hideAlert(){
        setAlert(null);
    }

/* I need this to be called if my X button is clicked in the Parent component.
   However, there's no to get values as it is only accessible from within the child component.
   handleSubmit is already wired up w/ formik/formik-wizard
*/
    function resetData(values){
        let result = false;

        if( !Array.isArray(values.lineItems.data) || values.lineItems.data.length > 0){
            values.lineItems.data = [];
            result = true;
        }

        return result;
    }

    const handleSubmit = useCallback(values => {
        (async () => {
            //attempt to POST Data here.

            //ON SUCCESS reset table data and hide invoice creation component
            if(resetData(values)){
                setAlert('success')
            }
            else{
                setAlert('error');
                return { message: 'Something went wrong submitting. Please try again!', reason:'Error reseting table data'}
            }
        })();
    })

    if(isCreatingInvoice){
        return(
            <div className={animation1}>
                <RevWizard
                    steps={InvoiceFormSteps}
                    handleSubmit={handleSubmit}
                    iconText={`Invoice #${invoiceID}`}
                />
            </div>
        );
    }
    else{
        return ( null )
    }
}