text: import React, { Component } from 'react';
  import * as PropTypes from 'prop-types';
  import { Formik, Form, Field } from 'formik';
  import withStyles from '@mui/styles/withStyles';
  import Drawer from '@mui/material/Drawer';
  import Typography from '@mui/material/Typography';
  import Button from '@mui/material/Button';
  import IconButton from '@mui/material/IconButton';
  import Fab from '@mui/material/Fab';
  import { Add, Close } from '@mui/icons-material';
  import * as Yup from 'yup';
  import graphql from 'babel-plugin-relay/macro';
  import { ConnectionHandler } from 'relay-runtime';
  import * as R from 'ramda';
  import inject18n from '../../../../components/i18n';
  import {
    commitMutation,
    handleErrorInForm,
  } from '../../../../relay/environment';
  import TextField from '../../../../components/TextField';
  import CreatedByField from '../../common/form/CreatedByField';
  import ObjectMarkingField from '../../common/form/ObjectMarkingField';
  import MarkDownField from '../../../../components/MarkDownField';
  import ExternalReferencesField from '../../common/form/ExternalReferencesField';
  
  const styles = (theme) => ({
    drawerPaper: {
      minHeight: '100vh',
      width: '50%',
      position: 'fixed',
      backgroundColor: theme.palette.navAlt.background,
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
      padding: 0,
    },
    createButton: {
      position: 'fixed',
      bottom: 30,
      right: 30,
    },
    buttons: {
      marginTop: 20,
      textAlign: 'right',
    },
    button: {
      marginLeft: theme.spacing(2),
    },
    header: {
      backgroundColor: theme.palette.navAlt.backgroundHeader,
      color: theme.palette.navAlt.backgroundHeaderText,
      padding: '20px 20px 20px 60px',
    },
    closeButton: {
      position: 'absolute',
      top: 12,
      left: 5,
      color: 'inherit',
    },
    importButton: {
      position: 'absolute',
      top: 15,
      right: 20,
    },
    container: {
      padding: '10px 20px 20px 20px',
    },
  });
  
  const positionMutation = graphql`
    mutation PositionCreationMutation($input: PositionAddInput!) {
      positionAdd(input: $input) {
        ...PositionLine_node
      }
    }
  `;
  
  const positionValidation = (t) => Yup.object().shape({
    name: Yup.string().required(t('This field is required')),
    description: Yup.string().nullable(),
    latitude: Yup.number()
      .typeError(t('This field must be a number'))
      .nullable(),
    longitude: Yup.number()
      .typeError(t('This field must be a number'))
      .nullable(),
  });
  
  const sharedUpdater = (store, userId, paginationOptions, newEdge) => {
    const userProxy = store.get(userId);
    const conn = ConnectionHandler.getConnection(
      userProxy,
      'Pagination_positions',
      paginationOptions,
    );
    ConnectionHandler.insertEdgeBefore(conn, newEdge);
  };
  
  class PositionCreation extends Component {
    constructor(props) {
      super(props);
      this.state = { open: false };
    }
  
    handleOpen() {
      this.setState({ open: true });
    }
  
    handleClose() {
      this.setState({ open: false });
    }
  
    onSubmit(values, { setSubmitting, setErrors, resetForm }) {
      const finalValues = R.pipe(
        R.assoc('createdBy', values.createdBy?.value),
        R.assoc('latitude', parseFloat(values.latitude)),
        R.assoc('longitude', parseFloat(values.longitude)),
        R.assoc('objectMarking', R.pluck('value', values.objectMarking)),
        R.assoc('externalReferences', R.pluck('value', values.externalReferences)),
      )(values);
      commitMutation({
        mutation: positionMutation,
        variables: {
          input: finalValues,
        },
        updater: (store) => {
          const payload = store.getRootField('positionAdd');
          const newEdge = payload.setLinkedRecord(payload, 'node'); // Creation of the pagination container.
          const container = store.getRoot();
          sharedUpdater(
            store,
            container.getDataID(),
            this.props.paginationOptions,
            newEdge,
          );
        },
        onError: (error) => {
          handleErrorInForm(error, setErrors);
          setSubmitting(false);
        },
        setSubmitting,
        onCompleted: () => {
          setSubmitting(false);
          resetForm();
          this.handleClose();
        },
      });
    }
  
    onReset() {
      this.handleClose();
    }
  
    render() {
      const { t, classes } = this.props;
      return (
        <div>
          <Fab
            onClick={this.handleOpen.bind(this)}
            color="secondary"
            aria-label="Add"
            className={classes.createButton}
          >
            <Add />
          </Fab>
          <Drawer
            open={this.state.open}
            anchor="right"
            classes={{ paper: classes.drawerPaper }}
            onClose={this.handleClose.bind(this)}
          >
            <div className={classes.header}>
              <IconButton
                aria-label="Close"
                className={classes.closeButton}
                onClick={this.handleClose.bind(this)}
                size="large"
              >
                <Close fontSize="small" />
              </IconButton>
              <Typography variant="h6">{t('Create a position')}</Typography>
            </div>
            <div className={classes.container}>
              <Formik
                initialValues={{
                  name: '',
                  description: '',
                  latitude: '',
                  longitude: '',
                  createdBy: '',
                  objectMarking: [],
                  externalReferences: [],
                }}
                validationSchema={positionValidation(t)}
                onSubmit={this.onSubmit.bind(this)}
                onReset={this.onReset.bind(this)}
              >
                {({
                  submitForm,
                  handleReset,
                  isSubmitting,
                  setFieldValue,
                  values,
                }) => (
                  <Form style={{ margin: '20px 0 20px 0' }}>
                    <Field
                      component={TextField}
                      name="name"
                      label={t('Name')}
                      fullWidth={true}
                      detectDuplicate={['Position']}
                    />
                    <Field
                      component={MarkDownField}
                      name="description"
                      label={t('Description')}
                      fullWidth={true}
                      multiline={true}
                      rows={4}
                      style={{ marginTop: 20 }}
                    />
                    <Field
                      component={TextField}
                      name="latitude"
                      label={t('Latitude')}
                      fullWidth={true}
                      style={{ marginTop: 20 }}
                    />
                    <Field
                      component={TextField}
                      name="longitude"
                      label={t('Longitude')}
                      fullWidth={true}
                      style={{ marginTop: 20 }}
                    />
                    <CreatedByField
                      name="createdBy"
                      style={{ marginTop: 20, width: '100%' }}
                      setFieldValue={setFieldValue}
                    />
                    <ObjectMarkingField
                      name="objectMarking"
                      style={{ marginTop: 20, width: '100%' }}
                    />
                    <ExternalReferencesField
                      name="externalReferences"
                      style={{ marginTop: 20, width: '100%' }}
                      setFieldValue={setFieldValue}
                      values={values.externalReferences}
                    />
                    <div className={classes.buttons}>
                      <Button
                        variant="contained"
                        onClick={handleReset}
                        disabled={isSubmitting}
                        classes={{ root: classes.button }}
                      >
                        {t('Cancel')}
                      </Button>
                      <Button
                        variant="contained"
                        color="primary"
                        onClick={submitForm}
                        disabled={isSubmitting}
                        classes={{ root: classes.button }}
                      >
                        {t('Create')}
                      </Button>
                    </div>
                  </Form>
                )}
              </Formik>
            </div>
          </Drawer>
        </div>
      );
    }
  }
  
  PositionCreation.propTypes = {
    paginationOptions: PropTypes.object,
    classes: PropTypes.object,
    theme: PropTypes.object,
    t: PropTypes.func,
  };
  
  export default R.compose(
    inject18n,
    withStyles(styles, { withTheme: true }),
  )(PositionCreation);
  