//@flow

import React from 'react';
import Button from 'app/components/Button';
import { createValidator, required } from 'app/utils/validation';
import { reduxForm } from 'redux-form';
import { roleOptions } from 'app/utils/constants';
import {
  TextInput,
  SelectInput,
  handleSubmissionError
} from 'app/components/Form';
import { Form, Field } from 'redux-form';

export type Props = {
  emailListId?: number,
  submitting: boolean,
  handleSubmit: Function => void,
  push: string => void,
  mutateFunction: Object => Promise<*>
};

const EmailListEditor = ({
  emailListId,
  mutateFunction,
  submitting,
  handleSubmit,
  push
}: Props) => {
  const onSubmit = data =>
    mutateFunction({
      id: data.id,
      email: data.email,
      name: data.name,
      groupRoles: (data.groupRoles || []).map(groupRole => groupRole.value),
      groups: (data.groups || []).map(group => group.value),
      users: (data.users || []).map(user => user.value)
    }).then(({ payload }) => {
      if (!emailListId) {
        push(`/admin/email/lists/${payload.result}`);
      }
    }, handleSubmissionError);

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Field
        required
        placeholder="Abakus"
        name="name"
        label="Navnet på Epostliste"
        component={TextInput.Field}
      />
      <Field
        required
        disabled={emailListId}
        placeholder="abakus"
        suffix="@abakus.no"
        name="email"
        label="Epost"
        component={TextInput.Field}
      />
      <Field
        label="Brukere"
        name="users"
        multi
        placeholder="Inviter en ny bruker"
        filter={['users.user']}
        component={SelectInput.AutocompleteField}
      />
      <Field
        label="Grupper"
        name="groups"
        multi
        placeholder="Inviter en ny bruker"
        filter={['users.abakusgroup']}
        component={SelectInput.AutocompleteField}
      />
      <Field
        label="Roller"
        name="groupRoles"
        multi
        placeholder="Velg rolle"
        options={roleOptions}
        component={SelectInput.Field}
      />
      <Button submit disabled={submitting}>
        {emailListId ? 'Oppdater epostliste' : 'Lag epostliste'}
      </Button>
    </Form>
  );
};

export default reduxForm({
  form: 'emailList',
  enableReinitialize: true,
  validate: createValidator({
    email: [required()],
    name: [required()]
  })
})(EmailListEditor);

@@ -267,16 +267,28 @@
 tInput,%0A
+  CheckBox,%0A
   handle
@@ -374,16 +374,62 @@
 x-form';
+%0Aimport Tooltip from 'app/components/Tooltip';
 %0A%0Aexport
@@ -819,16 +819,75 @@
 a.name,%0A
+      requireInternalAddress: data.requireInternalAddress,%0A
       gr
@@ -2243,32 +2243,368 @@
 .Field%7D%0A      /%3E
+%0A%0A      %3CTooltip content=%22N%C3%A5r denne er aktivert vil kun brukere med aktiv @abakus.no-adresse f%C3%A5 mail fra denne listen%22%3E%0A        %3CField%0A          label=%22Kun for for brukere med internmail (@abakus.no)%22%0A          name=%22requireInternalAddress%22%0A          component=%7BCheckBox.Field%7D%0A          normalize=%7Bv =%3E !!v%7D%0A        /%3E%0A      %3C/Tooltip%3E
 %0A      %3CButton s

Add support for interal filtering of mailing lists