import React, { useRef } from 'react';
import {Modal, Button, Row, Col} from 'react-materialize';

const InputModal = (props) => {
  const { title, body, confirmAction, stopAction, triggerNode, defaultInputValue, inputLabel } = props;
  const inputField = useRef(null);

  return(
    <Modal
      actions={[
        <Row>
          <Col s={3}>
            <Button modal="confirm" node="button" waves="green" onClick={() => confirmAction(inputField.current.value)}>Do it</Button>
          </Col>
          <Col s={3}>
            <Button modal="close" node="button" waves="red" onClick={stopAction}>Stop</Button>
          </Col>
        </Row>
      ]}
      bottomSheet
      fixedFooter={false}
      header={title}
      id="Modal-1"
      open={false}
      options={{
        dismissible: true,
        endingTop: '10%',
        inDuration: 250,
        onCloseEnd: null,
        onCloseStart: null,
        onOpenEnd: null,
        onOpenStart: null,
        opacity: 0.5,
        outDuration: 250,
        preventScrolling: true,
        startingTop: '4%'
      }}
      trigger={triggerNode}
    >
      <p><strong>{body}</strong></p>
      <br/>
      <div className="input-field col s6">
        <input key={`defaultInput:${defaultInputValue}`} ref={inputField} defaultValue={defaultInputValue} id="input-num" type="number" className="validate" />
        <label className="active" htmlFor="input-num">{inputLabel}</label>
      </div>
    </Modal>
  )
}

export default InputModal;