GroupList

import React, { useState, useEffect } from 'react'

import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Icon,
  IconButton,
  withStyles,
  Link,
} from '@material-ui/core'
import Swal from 'sweetalert2'

import { useHistory } from 'react-router-dom'
import { PermissionsApi } from '../../services/Apis'

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: '#5e6b78',
    color: theme.palette.common.white,
    borderRadius: 'none',
  },
}))(TableCell)

const getDescription = (data) => {
  let str = ''
  if (data) {
    data.map((res) => (str += `${res.description}, `))
    str = str.trimEnd()
    str = str.substring(',', str.length - 1)
  }

  return str
}

const GroupList = (props) => {
  const history = useHistory()
  const [groups, setGroups] = useState([])

  useEffect(() => {
    getGroups()
  }, [])

  useEffect(() => {
    if (groups.length > 0 && groups[0].permissions === undefined) {
      loadGroups(groups)
      console.log('permissions ', groups[0].permissions)
      console.log('groups ', groups)
    }
  })

  const getPermissionsByGroup = async (brandId, profile) => {
    if (profile) {
      const res = await PermissionsApi.getPermissionsByProfile(brandId, profile)
      if (res && res.data.content) return [...res.data.content]
    }
  }

  const getGroups = async () => {
    const res = await PermissionsApi.getAllAccessGroup()
    if (res && res.data.content) setGroups([...res.data.content])
  }

  const loadGroups = (groups) => {
    const groupsCopy = [...groups]
    if (groupsCopy) {
      groupsCopy.forEach(async (group) => {
        const permissions = await getPermissionsByGroup(
          group.brand,
          group.userProfile
        )
        const permissionsCopy = permissions.filter(
          (permission) =>
            permission.type === 'ACCESS' && permission.visible === true
        )
        group.permissions = getDescription(permissionsCopy)
      })
      setGroups(groupsCopy)
    }
  }

  const redirectTo = (id) => history.push(`/permissions/detail-group/${id}`)

  const showAlert = (title, text) => {
    Swal.fire({
      title: `${title}?`,
      text: `${text}!`,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sim, continue!',
      cancelButtonText: 'Cancelar',
    }).then((result) => {
      if (result.value) {
        Swal.fire('Excluido!', 'Procedimento efetuado com sucesso.', 'success')
      }
    })
  }

  function listGroups(item) {
    return (
      <TableRow key={item.id}>
        <TableCell component="th" scope="row">
          <Link
            component="button"
            variant="body2"
            onClick={() => redirectTo(item.id)}
          >
            {item.name}
          </Link>
        </TableCell>
        <TableCell>{item.userProfile}</TableCell>
        <TableCell>{item.permissions}</TableCell>
        <TableCell>
          <IconButton
            aria-label="edit"
            title="Editar"
            onClick={() => redirectTo(item.id)}
          >
            <Icon className="mr-4 text-20">edit</Icon>
          </IconButton>
          <IconButton
            aria-label="edit"
            onClick={() =>
              showAlert(
                'Deseja realmente excluir',
                'Após confirmar, esse procedimento não poderá ser desfeito'
              )
            }
            title="Excluir"
          >
            <Icon className="mr-4 text-20">delete</Icon>
          </IconButton>
        </TableCell>
      </TableRow>
    )
  }

  return (
    <TableContainer>
      <Table stickyHeader aria-label="simple table">
        <TableHead>
          <TableRow>
            <StyledTableCell>Nome</StyledTableCell>
            <StyledTableCell>Perfil</StyledTableCell>
            <StyledTableCell>Permissões</StyledTableCell>
            <StyledTableCell>Ações</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {groups.length > 0 ? (
            groups.map(listGroups)
          ) : (
            <TableRow>
              <TableCell
                style={{ width: '100%', padding: 10, textAlign: 'center' }}
              >
                <p>No momento nenhum grupo cadastrado!</p>
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </TableContainer>
  )
}

export default GroupList