import React from 'react';
import Chip from '@material-ui/core/Chip';
import IconButton from '@material-ui/core/IconButton';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Tooltip from '@material-ui/core/Tooltip';
import withStyles from '@material-ui/core/styles/withStyles';
import CloseIcon from '@material-ui/icons/Close';
import DoneIcon from '@material-ui/icons/Done';

import { canRenderAction } from '../services/permission-set.service';

const styles = theme => ({
  permissionWrapper: {},
  permissionActionWrapper: {}
});

export default withStyles(styles)(({ classes, resources, roles, removeButton, selectButton }) => {

  const renderPermissionActions = (permissions, resource) => permissions.map(permission => {
    const canRender = canRenderAction(resource, permission.resource);

    return canRender ? <span>{permission.action}</span> : ''
  });

  const renderPermissions = permissions => resources.map(resource => {
    return (
      <div
        className={classes.permissionWrapper}
        key={resource}>
        <React.Fragment>
          <Chip
            color={"primary"}
            label={resource}
          />
          <div className={classes.permissionActionWrapper}>{renderPermissionActions.apply(this, [permissions,resource] )}</div>
        </React.Fragment>
      </div>
    );
  });

  const renderRemoveButton = (
    <Tooltip title={"Remove item"}>
      <IconButton>
        <CloseIcon />
      </IconButton>
    </Tooltip>
  );

  const renderSelectButton = (
    <Tooltip title={"Select item"}>
      <IconButton>
        <DoneIcon />
      </IconButton>
    </Tooltip>
  );

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>No.</TableCell>
          <TableCell>Name</TableCell>
          <TableCell>Permissions</TableCell>
          <TableCell numeric />
        </TableRow>
      </TableHead>
      <TableBody>
        {roles.map((role, index) => {
          let uniqueKey = role.id;
          let positionNumber = ++index;
          let name = role.name;
          let permissions = role.permissionSet;

          return (
            <TableRow key={uniqueKey}>
              <TableCell>{positionNumber}.</TableCell>
              <TableCell
                className={classes.tableCellForName}
                component={"th"}
                scope={"row"}>{name}
              </TableCell>
              <TableCell>{renderPermissions.apply(this, [permissions])}</TableCell>
              <TableCell numeric>
                {removeButton ? renderRemoveButton : ''}
                {selectButton ? renderSelectButton : ''}
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
});