import * as React from 'react';
import { translate } from 'react-i18next';
import {Field, reduxForm, FieldArray} from 'redux-form';

// utilities
import {log} from 'utilities/debug';
import Validators from 'utilities/Validators';

// constants
import {SUBSET_CREATOR_FORM} from 'subsets/constants';

// models
import Subset from 'model/subset/Subset';
import SubsetCreator, {CreatorRole} from 'model/subset/SubsetCreator';

// ui
import {withStyles} from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from 'ui/common/forms/FormControl';
import {TextField} from 'ui/common/text-field';


interface ISubsetCreatorFormProps extends React.ClassAttributes<any> {
    t: any;
    initialValues: any;
    fields: any;
    classes: any;
    subset: Subset;
    createSubsetCreator: () => Promise<SubsetCreator>;
    deleteCreatorRequest: (creator: SubsetCreator) => Promise<SubsetCreator>;
}

const styles = (theme) => ({
    /* tslint:disable */
    RadioGrid: {
        flexDirection: 'row' as 'row',
        justifyContent: 'space-evenly' as 'space-evenly',
        '& > label': {
            flexBasis: '45%',
        },
    }
});
/* tslint:enable */
const renderRadioGroup = translate()(({input, meta, t, classes}) => {
  const onInputChange = (event, value) => input.onChange(value);

  return (
    <FormControl fullWidth required meta={ meta }>
        <FormLabel>{ t(`subsets.dashboard.p.stepper.creators.Role`) }</FormLabel>
        <RadioGroup
            { ...input }
            value={ input.value }
            onChange={ onInputChange }
            className={ classes.RadioGrid }
        >
            { Object.keys(CreatorRole).map((role) => (
                <FormControlLabel
                  value={ role }
                  label={ t(`subsets.common.creators.role.${role}`) }
                  control={ <Radio/> }
                />
            )) }
        </RadioGroup>
    </FormControl>
  );
});

class SubsetCreatorForm extends React.Component<ISubsetCreatorFormProps, any> {

    public createCreator = () => {
        log('create creator event');
        this.props.createSubsetCreator();
    }

    public deleteCreator = (fields, index) => () => {
        this.props.deleteCreatorRequest(fields.get(index));
    }

    public renderCreators = ({ classes, fields, meta: { touched, error, submitFailed } , t}) => {

        return(
            <div>
            { fields.map((creator, index) => (

                    <div key={ index } className="m-20 p-20 even-row">
                        <div>
                            <IconButton aria-label="Delete" className="float-right" onClick={ this.deleteCreator(fields, index) }>
                                <DeleteIcon />
                            </IconButton>
                        </div>
                        <Field required name={ `${creator}.fullName` }
                               component={ TextField }
                               label={ t(`subsets.dashboard.p.stepper.creators.fullName`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.fullNamePlaceholder`) }
                               validate={ [ Validators.required ] }
                        />
                        <Field required name={ `${creator}.role` }
                               classes={ classes }
                                component={ renderRadioGroup }
                        />
                        <Field name={ `${creator}.institutionalAffiliation` }
                               component={ TextField }
                               type="text"
                               label={ t(`subsets.dashboard.p.stepper.creators.institutionalAffiliation`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.institutionalAffiliationPlaceholder`) }
                        />
                        <Field name={ `${creator}.email` }
                               component={ TextField }
                               type="text" label={ t(`subsets.dashboard.p.stepper.creators.email`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.emailPlaceholder`) }
                               validate={ [ Validators.emailAddress ] }
                        />
                        <Field name={ `${creator}.phoneNumber` }
                               component={ TextField }
                               type="text"
                               label={ t(`subsets.dashboard.p.stepper.creators.phone`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.phonePlaceholder`) }
                               validate={ [ Validators.phoneNumber ] }
                        />
                        <Field name={ `${creator}.fax` }
                               component={ TextField }
                               type="text"
                               label={ t(`subsets.dashboard.p.stepper.creators.fax`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.faxPlaceholder`) }
                               validate={ [ Validators.phoneNumber ] }
                        />
                        <Field name={ `${creator}.instituteAddress` }
                               component={ TextField }
                               type="text"
                               label={ t(`subsets.dashboard.p.stepper.creators.address`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.addressPlaceholder`) }
                        />
                    </div>
                ),
            ) }
        </div>
        );
    }

    public render() {
        const { t } = this.props;
        return (
            <Grid spacing={ 0 } container>
                <form className="full-width">
                    <FieldArray name="creators" classes={ this.props.classes } component={ this.renderCreators } t={ t }/>
                </form>
                <Grid item xs={ 12 } className="back-white">
                    <Button variant="contained" type="button" onClick={ this.createCreator } style={ { margin: '20px' } }>
                      { t(`subsets.dashboard.p.stepper.creators.addSubsetCreator`) }
                    </Button>
                </Grid>
            </Grid>
        );
    }
}

export default translate()(reduxForm({
    form: SUBSET_CREATOR_FORM,
    enableReinitialize: true,
})(translate()(((withStyles as any)(styles)(SubsetCreatorForm)))));