import React from 'react';

import {Button, Form, Modal} from 'src/components';

export const AddDashboardModal = (props) => {
  const [name, setName] = React.useState('');

  const onNameInputChange = React.useCallback(
    (event) => {
      setName(event.target.value);
    },
    [setName]
  );

  const onModalClose = React.useCallback(
    () => {
      setName('');
      props.onClose();
    },
    [props, setName]
  );

  const onSaveButtonClick = React.useCallback(
    () => {
      props.onSave(name);
      onModalClose();
    },
    [props, name, onModalClose]
  );

  return (
    <Modal show={props.show} onHide={onModalClose}>
      <Modal.Body>
        <Form>
          <Form.Group controlId="input-name">
            <Form.Label>Name</Form.Label>
            <Form.Control
              value={name}
              onChange={onNameInputChange}
            />
          </Form.Group>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button
          size="sm"
          variant="secondary"
          onClick={onModalClose}
        >
          Cancel
        </Button>
        <Button size="sm" variant="primary" onClick={onSaveButtonClick}>
          Save
        </Button>
      </Modal.Footer>
    </Modal>
  );
};
