// @flow

import styles from './ConfirmModal.css';
import React, { type ComponentType, type Node } from 'react';
import Modal from 'app/components/Modal';
import Button from '../Button';

type ConfirmModalProps = {
  onConfirm?: () => Promise<*>,
  onCancel?: () => Promise<*>,
  autoClose?: boolean,
  message: string,
  title: string,
  children: Node
};

export const ConfirmModal = ({
  message,
  onConfirm,
  onCancel,
  title
}: ConfirmModalProps) => (
  <div className={styles.overlay}>
    <div className={styles.confirmContainer}>
      <h2 className={styles.confirmTitle}>{title}</h2>
      <div className={styles.confirmMessage}>{message}</div>
      <div className={styles.buttonGroup}>
        <Button onClick={onCancel}>Avbryt</Button>
        <Button onClick={onConfirm}>Ja</Button>
      </div>
    </div>
  </div>
);

type State = {
  modalVisible: boolean
};

type withModalProps = {
  /* Close the modal after confirm promise is resolved*/
  closeOnConfirm?: boolean,
  /* Close the modal after cancel promise is resolved*/
  closeOnCancel?: boolean
};

export default function withModal<Props>(
  WrappedComponent: ComponentType<Props>
) {
  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || 'Unknown';

  return class extends React.Component<
    withModalProps & ConfirmModalProps,
    State
  > {
    static displayName = `WithModal(${displayName})`;
    state = { modalVisible: false };

    toggleModal = () => {
      this.setState(state => ({
        modalVisible: !state.modalVisible
      }));
    };

    render() {
      const {
        onConfirm = Promise.resolve(),
        onCancel = Promise.resolve(),
        message,
        title,
        closeOnCancel = true,
        closeOnConfirm = false,
        ...props
      } = this.props;

      const modalOnConfirm = () =>
        onConfirm.then(result => {
          closeOnConfirm && this.toggleModal();
          return result;
        });

      const modalOnCancel = () =>
        onCancel.then(result => {
          closeOnCancel && this.toggleModal();
          return result;
        });

      return (
        <div>
          {/* $FlowFixMe rest props hoc behaviour */}
          <WrappedComponent {...props} onClick={this.toggleModal} />
          <Modal show={this.state.modalVisible} onHide={this.toggleModal}>
            <ConfirmModal
              onCancel={modalOnCancel}
              onConfirm={modalOnConfirm}
              {...this.props}
            />
          </Modal>
        </div>
      );
    }
  };
}

const ChildrenWithProps = ({ children, ...restProps }: { children: Node }) => (
  <div>
    {React.Children.map(children, child =>
      React.cloneElement(child, { ...restProps })
    )}
  </div>
);

export const ConfirmModalWithParent = withModal(ChildrenWithProps);

@@ -275,31 +275,8 @@
 *%3E,%0A
-  autoClose?: boolean,%0A
   me
@@ -290,16 +290,16 @@
 string,%0A
+
   title:
@@ -986,21 +986,22 @@
  after c
-ancel
+onfirm
  promise
@@ -1036,24 +1036,42 @@
 el?: boolean
+,%0A  children: Node
 %0A%7D;%0A%0Aexport 
@@ -1600,16 +1600,22 @@
 onfirm =
+ () =%3E
  Promise
@@ -1644,16 +1644,22 @@
 Cancel =
+ () =%3E
  Promise
@@ -2130,80 +2130,10 @@
 urn 
-(%0A        %3Cdiv%3E%0A          %7B/* $FlowFixMe rest props hoc behaviour */%7D%0A  
+%5B%0A
     
@@ -2153,16 +2153,24 @@
 omponent
+ key=%7B0%7D
  %7B...pro
@@ -2202,19 +2202,18 @@
 odal%7D /%3E
+,
 %0A
-  
         
@@ -2218,16 +2218,24 @@
   %3CModal
+ key=%7B1%7D
  show=%7Bt
@@ -2295,18 +2295,16 @@
         
-  
 %3CConfirm
@@ -2309,18 +2309,16 @@
 rmModal%0A
-  
         
@@ -2354,26 +2354,24 @@
             
-  
 onConfirm=%7Bm
@@ -2401,43 +2401,107 @@
     
-  %7B...this.props%7D%0A            /%3E%0A  
+message=%7Bmessage%7D%0A            title=%7Btitle%7D%0A            disabled=%7Bthis.state.working%7D%0A          /%3E%0A
     
@@ -2523,24 +2523,9 @@
     
-  %3C/div%3E%0A      )
+%5D
 ;%0A  

Fix ConfirmModal props