import * as React from 'react';
import { translate } from 'react-i18next';
import { Field, FieldArray, reduxForm } from 'redux-form';
// Constants
import { ADMIN_UPDATE_OAUTH_CLIENT_FORM } from 'user/constants';
// Model
import OAuthClient from 'model/oauth/OAuthClient';
import GrantedAuthority from 'model/oauth/GrantedAuthority';
// Util
import Validators from 'utilities/Validators';
// UI
import { TextField } from 'ui/common/text-field';
import ItemsEditor from 'ui/common/ItemsEditor';
import CheckboxSelection from 'ui/common/forms/CheckboxSelection';
import BooleanRadioGroup from 'ui/common/forms/BooleanRadioGroup';
import Button from '@material-ui/core/Button';

const stringField = (member, index, fields, itemLabel) => (
  <Field required name={ `${member}` } type="text" component={ TextField } label={ itemLabel } validate={ [Validators.required] }/>
);

class UserForm extends React.Component<any, any> {

  public constructor(props: any) {
    super(props);
    this.state = {
      autoApprove: props.initialValues && props.initialValues.autoApprove || false,
    };
  }

  private handleRadioChange = (e, newValue) => {
    this.setState({ autoApprove: newValue === 'true' });
  }

  public render() {
    const { onCancel, t, error, handleSubmit, submitting, invalid } = this.props;

    return (
      <form onSubmit={ handleSubmit }>
        <Field
          name={ `clientId` }
          disabled
          component={ TextField }
          type="text"
          label={ t(`user.common.oAuth.clientId`) }
        />
        <Field
          name={ `title` }
          component={ TextField }
          type="text"
          label={ t(`user.common.oAuth.clientTitle`) }
          validate={ [Validators.required] }
        />
        <Field
          name={ `description` }
          component={ TextField }
          type="text"
          multiline
          label={ t(`user.common.oAuth.description`) }
        />
        <Field
          name={ `accessTokenValidity` }
          component={ TextField }
          type="text"
          placeholder={ t('common:label.useDefault') }
          label={ t(`user.common.oAuth.accessTokenValidity`) }
          validate={ [Validators.decimalNumber] }
        />
        <Field
          name={ `refreshTokenValidity` }
          component={ TextField }
          type="text"
          placeholder={ t('common:label.useDefault') }
          label={ t(`user.common.oAuth.refreshTokenValidity`) }
          validate={ [Validators.decimalNumber] }
        />
        <ItemsEditor name="registeredRedirectUri" itemLabel={ t('user.common.oAuth.redirectUris') } addItem={ console.log } removeItem={ console.log } component={ stringField }/>
        <ItemsEditor name="allowedOrigins" itemLabel={ t('user.common.oAuth.allowedOrigins') } addItem={ console.log } removeItem={ console.log } component={ stringField }/>
        <FieldArray
          name="authorizedGrantTypes"
          options={ OAuthClient.AVAILABLE_GRANT_TYPES }
          component={ CheckboxSelection }
          renderOptionLabel={ (gT) => t(`user.common.oAuth.grantTypes.${gT}`) }
          formLabel={ t(`user.common.oAuth.grantType`) }
          t={ t }
          style={ { maxWidth: '1024px' } }
        />
        <FieldArray
          name="roles"
          options={ GrantedAuthority.AVAILABLE_AUTHORITIES }
          component={ CheckboxSelection }
          renderOptionLabel={ (authority) => t(`user.common.oAuth.authorities.${authority}`) }
          formLabel={ t(`user.common.oAuth.authority`) }
          t={ t }
          style={ { maxWidth: '1024px' } }
        />
        <FieldArray
          name="clientScopes"
          options={ OAuthClient.AVAILABLE_SCOPES }
          component={ CheckboxSelection }
          renderOptionLabel={ (scope) => t(`user.common.oAuth.clientScopes.${scope}`) }
          formLabel={ t(`user.common.oAuth.clientScope`) }
          t={ t }
          style={ { maxWidth: '1024px' } }
        />

        <Field
          name="autoApprove"
          component={ BooleanRadioGroup  }
          onChange={ this.handleRadioChange }
          formLabel={ t(`user.common.oAuth.autoApprove`) }
          labelTrue={ t('user.common.oAuth.autoApproveTrue') }
          labelFalse={ t('user.common.oAuth.autoApproveFalse') }
          t={ t }
        />
        <FieldArray
          name="autoApproveScopes"
          disabled={ !this.state.autoApprove }
          options={ OAuthClient.AVAILABLE_SCOPES }
          component={ CheckboxSelection }
          renderOptionLabel={ (scope) => t(`user.common.oAuth.clientScopes.${scope}`) }
          formLabel={ t(`user.common.oAuth.autoApproveScope`) }
          t={ t }
        />
        { error && <div style={ { color: 'red' } }>{ error }</div> }
        <Button variant="contained" type="submit" style={ { marginRight: '1rem', marginTop: '1rem' } } disabled={ submitting || invalid }>{ t('common:action.save') }</Button>
        <Button variant="contained" type="button" style={ { marginLeft: '1rem', marginTop: '1rem' } } onClick={ onCancel }>{ t('common:action.cancel') }</Button>
      </form>
    );
  }
}

export default translate()(reduxForm({
  form: ADMIN_UPDATE_OAUTH_CLIENT_FORM,
  enableReinitialize: true,
})(UserForm));