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

import { Form, FormContent, 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 UpdatePermissionDialog(props) {
  const [fields, setFiled] = useState({
    id: props.data.id,
    displayName: props.data.displayName,
    description: props.data.description,
    moduleId: props.data.moduleId,
  });

  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 Permission: <b>{props.data.name}</b>
      </DialogTitle>
      <DialogContent>
        <Form>
          <FormContent>
            <FormSection>
              <FormRow label="Display Name">
                <TextField
                  size="small"
                  placeholder="Enter 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>
            </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>
  );
}

UpdatePermissionDialog.propTypes = {
  data: PropTypes.shape({
    id: PropTypes.number,
    moduleId: PropTypes.number,
    displayName: PropTypes.string,
    description: PropTypes.string,
    name: PropTypes.string,
  }).isRequired,
  onClose: PropTypes.func.isRequired,
  onApply: PropTypes.func.isRequired,
};

export default UpdatePermissionDialog;
