// @flow

import { useState } from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import cx from 'classnames';
import { getFormMeta, getFormValues, reduxForm, Field } from 'redux-form';
import type { FormProps } from 'redux-form';
import { EditorField } from 'app/components/Form';
import Button from 'app/components/Button';
import { ProfilePicture } from 'app/components/Image';
import { addComment } from 'app/actions/CommentActions';
import type { CommentEntity } from 'app/actions/CommentActions';
import styles from './CommentForm.css';
import DisplayContent from 'app/components/DisplayContent';
import { EDITOR_EMPTY } from 'app/utils/constants';

const validate = (values) => {
  const errors = {};
  if (!values.text) {
    errors.text = 'Required';
  }
  return errors;
};

type Props = {
  contentTarget: string,
  user: Object,
  loggedIn: boolean,
  addComment: (CommentEntity) => void,
  parent: number,
  submitText: string,
  inlineMode: boolean,
  initialized: boolean,
  autoFocus: boolean,
  isOpen: boolean,
} & FormProps;

const CommentForm = ({
  addComment,
  handleSubmit,
  pristine,
  submitting,
  user,
  isOpen,
  loggedIn,
  submitText = 'Kommenter',
  inlineMode,
  autoFocus = false,
  initialized,
  contentTarget,
  parent,
}: Props) => {
  const [disabled, setDisabled] = useState(!__CLIENT__);

  const onSubmit = ({ text }) => {
    addComment({
      contentTarget,
      text,
      parent,
    });
  };

  const enableForm = (e) => {
    setDisabled(false);
  };

  const className = inlineMode ? styles.inlineForm : styles.form;

  if (!loggedIn) {
    return <div>Vennligst logg inn.</div>;
  }

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className={cx(className, isOpen && styles.activeForm)}
    >
      <div className={styles.header}>
        <ProfilePicture size={40} user={user} />

        {isOpen && <div className={styles.author}>{user.fullName}</div>}
      </div>

      <div
        className={cx(styles.fields, isOpen && styles.activeFields)}
        onMouseOver={enableForm}
        onScroll={enableForm}
        onPointerDown={enableForm}
      >
        {disabled ? (
          <DisplayContent
            id="comment-text"
            className={styles.text}
            content=""
            placeholder="Skriv en kommentar"
          />
        ) : (
          <Field
            autoFocus={autoFocus}
            name="text"
            placeholder="Skriv en kommentar"
            component={EditorField}
            initialized={initialized}
            simple
          />
        )}

        {isOpen && (
          <Button
            submit
            disabled={pristine || submitting}
            className={styles.submit}
          >
            {submitText}
          </Button>
        )}
      </div>
    </form>
  );
};

function mapStateToProps(state, props) {
  const meta = getFormMeta(props.form)(state);
  const values = getFormValues(props.form)(state);
  return {
    isOpen:
      meta &&
      meta.text &&
      (meta.text.active || (values && values.text !== EDITOR_EMPTY)),
  };
}

export default compose(
  reduxForm({
    validate,
    initialValues: {},
    destroyOnUnmount: false,
  }),
  connect(mapStateToProps, { addComment })
)(CommentForm);

@@ -50,48 +50,32 @@
 t %7B 
-compose %7D from 'redux';%0Aimport %7B conn
+useDispatch, useSel
 ect
+or
  %7D f
@@ -453,73 +453,8 @@
 s';%0A
-import type %7B CommentEntity %7D from 'app/actions/CommentActions';%0A
 impo
@@ -812,47 +812,8 @@
 an,%0A
-  addComment: (CommentEntity) =%3E void,%0A
   pa
@@ -979,22 +979,8 @@
  (%7B%0A
-  addComment,%0A
   ha
@@ -1027,22 +1027,20 @@
 user,%0A  
-isOpen
+form
 ,%0A  logg
@@ -1157,32 +1157,328 @@
 %0A%7D: Props) =%3E %7B%0A
+  const dispatch = useDispatch();%0A%0A  const isOpen = useSelector((state) =%3E %7B%0A    const meta = getFormMeta(form)(state);%0A    const values = getFormValues(form)(state);%0A    return (%0A      meta &&%0A      meta.text &&%0A      (meta.text.active %7C%7C (values && values.text !== EDITOR_EMPTY))%0A    );%0A  %7D);%0A%0A
   const %5Bdisable
@@ -1550,24 +1550,40 @@
 ext %7D) =%3E %7B%0A
+    dispatch(%0A  
     addComme
@@ -1587,16 +1587,18 @@
 mment(%7B%0A
+  
       co
@@ -1610,16 +1610,18 @@
 Target,%0A
+  
       te
@@ -1630,16 +1630,18 @@
 ,%0A      
+  
 parent,%0A
@@ -1644,17 +1644,25 @@
 nt,%0A    
-%7D
+  %7D)%0A    
 );%0A  %7D;%0A
@@ -3040,281 +3040,8 @@
 %7D;%0A%0A
-function mapStateToProps(state, props) %7B%0A  const meta = getFormMeta(props.form)(state);%0A  const values = getFormValues(props.form)(state);%0A  return %7B%0A    isOpen:%0A      meta &&%0A      meta.text &&%0A      (meta.text.active %7C%7C (values && values.text !== EDITOR_EMPTY)),%0A  %7D;%0A%7D%0A%0A
 expo
@@ -3055,19 +3055,8 @@
 ult 
-compose(%0A  
 redu
@@ -3063,18 +3063,16 @@
 xForm(%7B%0A
-  
   valida
@@ -3075,18 +3075,16 @@
 lidate,%0A
-  
   initia
@@ -3096,18 +3096,16 @@
 es: %7B%7D,%0A
-  
   destro
@@ -3127,57 +3127,9 @@
 se,%0A
-  %7D),%0A  connect(mapStateToProps, %7B addComment %7D)%0A
+%7D
 )(Co

use redux hooks in comment form