import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { Form, FormContent, FormGroupTitle, FormRow, FormSection } from '@/modules/@common/Form';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@/mui/components';

const NAME_MAX_LENGTH = 100;
const DESCRIPTION_MAX_LENGTH = 250;

function UpdateRoleModuleDialog(props) {
  const [getPermission, postPermission, putPermission, deletePermission] = props.data.crudPermissions;

  const [fields, setFiled] = useState({
    id: props.data.id,
    displayName: props.data.displayName,
    description: props.data.description,
    getDescription: getPermission?.description,
    postDescription: postPermission?.description,
    putDescription: putPermission?.description,
    deleteDescription: deletePermission?.description,
    crudPermissions: props.data.crudPermissions,
  });

  const handleClose = () => props.onClose();
  const handleSetState = (valueObject) => {
    setFiled((prev) => ({ ...prev, ...valueObject }));
  };
  const handleApply = () => {
    props.onApply(fields);
    handleClose();
  };

  return (
    <Dialog open={true} onClose={handleClose} maxWidth="x2l">
      <DialogTitle onClose={handleClose}>Update Module</DialogTitle>
      <DialogContent>
        <Form>
          <FormContent>
            <FormSection>
              <FormRow label="Module Display Name">
                <TextField
                  size="small"
                  placeholder="Enter Module Display Name"
                  value={fields.displayName}
                  inputProps={{ maxLength: NAME_MAX_LENGTH }}
                  onChange={(e) => handleSetState({ displayName: e.target.value })}
                />
              </FormRow>
              <FormRow label="Module Description">
                <TextField
                  multiline
                  maxRows={3}
                  minRows={3}
                  size="small"
                  placeholder="Enter Module Description"
                  value={fields.description}
                  inputProps={{ maxLength: DESCRIPTION_MAX_LENGTH }}
                  onChange={(e) => handleSetState({ description: e.target.value })}
                />
              </FormRow>

              <FormGroupTitle>Permission Description</FormGroupTitle>

              {props.data.crudPermissions.map((crud) => {
                if (!crud) {
                  return null;
                }

                const fieldStateKey = `${crud.type.toLowerCase()}Description`;
                return (
                  <FormRow
                    key={crud.id}
                    label={
                      <b>
                        {crud.name} ({crud.type})
                      </b>
                    }
                  >
                    <TextField
                      multiline
                      maxRows={3}
                      minRows={3}
                      size="small"
                      placeholder="Enter Permission Description"
                      value={fields[fieldStateKey]}
                      inputProps={{ maxLength: DESCRIPTION_MAX_LENGTH }}
                      onChange={(e) => handleSetState({ [fieldStateKey]: e.target.value })}
                    />
                  </FormRow>
                );
              })}
            </FormSection>
          </FormContent>
        </Form>
      </DialogContent>
      <DialogActions>
        <Button variant="outlined" color="primary" onClick={handleClose}>
          Cancel
        </Button>
        <Button variant="contained" color="primary" onClick={handleApply}>
          Apply
        </Button>
      </DialogActions>
    </Dialog>
  );
}

UpdateRoleModuleDialog.propTypes = {
  data: PropTypes.shape({
    id: PropTypes.number,
    displayName: PropTypes.string,
    description: PropTypes.string,
    crudPermissions: PropTypes.arrayOf(PropTypes.shape({})),
  }).isRequired,
  onClose: PropTypes.func.isRequired,
  onApply: PropTypes.func.isRequired,
};

export default UpdateRoleModuleDialog;
