import { Button } from 'react-bootstrap';
import Reset from '../display/Reset';
import useDeleteLogic from '../../hooks/useDeleteLogic';

function FormButtons( props ) {

  let {
    deleteMessage,
    deletePayload,
    deletePrompt,
    disabled,
    errors,
    noReset,
    onDelete,
    onReset,
    showDelete,
    submitText
  } = props;

  const { 
    DeleteConfirmationModal,
    DeleteIcon,
    showConfirmationModal
  } = useDeleteLogic();

  if (!deletePrompt ) deletePrompt = 'delete this item?';

  if (!errors ) errors = {}; // in case the form is not using validation

  return (

    <div className="mb-2">

      <Button 
        disabled={Object.keys( errors ).length > 0 || disabled }
        type="submit"
        variant="primary" 
      >
        {Object.keys( errors ).length > 0 && ( <span>missing required inputs</span> )}
        {Object.keys( errors ).length === 0 && ( <span>{submitText}</span> )}
      </Button>

      {showDelete && (

        <DeleteIcon
          deleteMessage={deleteMessage}
          deletePayload={deletePayload}
          deletePrompt={deletePrompt}
          onClick={showConfirmationModal}
        />

      )}
      
      {!noReset && ( <Reset onReset = {onReset} /> ) }

      <DeleteConfirmationModal confirmModal={onDelete} />

    </div>

  );

}

export default FormButtons;