text: import React, { useRef, memo, useState, useEffect } from 'react';
  import {
  
    MDBCol,
    MDBCollapse,
    MDBCollapseHeader,
    MDBRow,
    MDBIcon,
    MDBSimpleChart,
    MDBInput,
    MDBCard
  } from 'mdbreact';
  import IconButtonToolTip from '../IconButtonToolTip/IconButtonToolTip'
  import DataComponent from '../DataComponent/DataComponent'
  
  const AccordionComponent = (props) => {
    const element = props.element
    const [open, setOpen] = useState(false);
  
    const calculateAverage = (rows) => {
      let sum = 0
      rows.map(row => sum += row.completed)
      let avg = sum/rows.length
      return avg
    }
  
    const caculateCompletedPercentage = (el) => {
      const keysNum = Object.keys(el).length
      let completed = 0;
      let avg
      for (const key of Object.keys(el)) {
        if(el[key]) completed++
      }
      avg = Math.ceil(completed/keysNum*100)
      return avg
    }
  
    const handleTitleClick = (item) => {
      // console.log(item, collapseID)
  
      // if (item !== collapseID) setCollapseID(item)
      // else setCollapseID('')
      if (props.onTitleClick) {
        // if (`collapse${item}` !== collapseID)
        props.onTitleClick(item)
      } else {
        if (props.onRowClick) props.onRowClick(item) 
      }
    }
  
    let hasDefaultViewData = false
    if(element.default_view_data && element.default_view_data !== 'null' && element.default_view_data !== 'undefined') hasDefaultViewData = true
    const active = props.selectedObjectIds.includes(element.object_id)   
  
    const avg = caculateCompletedPercentage(element)
  
    return (
      <MDBCard
        // ref={elementRef}
        // key={element.object_id}
        id={element.object_id}
        style={{ backgroundColor: 'transparent' }}
      >
        <MDBCollapseHeader
          // onClick={() => handleTitleClick(element.object_id, index)}
          // className={`${props.selectedObjectIds.includes(element.object_id) ? 'lighten-3' : 'lighten-4'} blue z-depth-1`}
          className={`transitioned z-depth-1 ${
            active ? 'color-white bgPrimaryFaded5' : ''
          } ${props.className}`}
        >
          <MDBRow className="no-gutters accordionTitleRow fontSmall">
            <MDBCol md="1">
              {props.checkBox && (
                <MDBInput
                  className="accordionCheckBox"
                  type="checkbox"
                  checked={active}
                  id={`accordionCheckBox${element.object_id}`}
                  onChange={e =>
                    props.onTitleClick
                      ? props.onTitleClick(element)
                      : props.onRowClick(element)
                  }
                  // onInput={(e) => console.log(e)}
                />
              )}
            </MDBCol>
            <MDBCol md="7" onClick={() => handleTitleClick(element)}>
              <span className={`text-${props.textColor}`}>{element.name}</span>
            </MDBCol>
            <MDBCol md="1" onClick={() => handleTitleClick(element)}>
              <MDBSimpleChart
                strokeColor={avg == 100 ? 'green' : 'red'}
                strokeWidth={1}
                width={22}
                height={22}
                percent={avg}
                labelFontWeight="normal"
                labelFontSize="8"
                labelColor={avg !== 100 ? 'red' : 'green'}
              />
            </MDBCol>
  
            <MDBCol md="3">
              <MDBIcon
                icon={open ? 'angle-up' : 'angle-down'}
                onClick={() => setOpen(!open)}
                className={`text-${props.textColor}`}
                style={{ float: 'right' }}
              />
              <IconButtonToolTip
                className=""
                iconClassName={`text-${props.textColor} mx-1 float-right`}
                size="sm"
                iconName="edit"
                toolTipType="info"
                toolTipPosition="bottom"
                toolTipEffect="float"
                toolTipText="Edit element"
                onClickFunction={() => props.editElement(element.object_id)}
              />
  
              <IconButtonToolTip
                className={
                  (!element.default_view_data ||
                    element.default_view_data == 'null') &&
                  'disabled'
                }
                iconClassName={`text-${props.textColor} mx-1 float-right`}
                size="sm"
                iconName="crosshairs"
                toolTipType="info"
                toolTipPosition="bottom"
                toolTipEffect="float"
                toolTipText="Zoom"
                onClickFunction={() => props.zoomToElement(element.object_id)}
              />
            </MDBCol>
          </MDBRow>
        </MDBCollapseHeader>
        <MDBCollapse
          className="pt-2"
          id={`collapse${element.object_id}`}
          isOpen={open}
        >
          <DataComponent data={element} />
        </MDBCollapse>
      </MDBCard>
    );
  
  
  }
  
  export default memo(AccordionComponent);
  