text: import { makeStyles } from '@material-ui/core'
  import classnames from 'classnames'
  import * as R from 'ramda'
  import React, { useContext } from 'react'
  
  import {
    Td,
    THead,
    TDoubleLevelHead,
    ThDoubleLevel
  } from 'src/components/fake-table/Table'
  import { startCase } from 'src/utils/string'
  
  import TableCtx from './Context'
  
  const styles = {
    orderedBySpan: {
      whiteSpace: 'nowrap'
    }
  }
  
  const useStyles = makeStyles(styles)
  
  const groupSecondHeader = elements => {
    const [toSHeader, noSHeader] = R.partition(R.has('doubleHeader'))(elements)
  
    if (!toSHeader.length) {
      return [elements, THead]
    }
  
    const index = R.indexOf(toSHeader[0], elements)
    const width = R.compose(R.sum, R.map(R.path(['width'])))(toSHeader)
  
    const innerElements = R.insert(
      index,
      { width, elements: toSHeader, name: toSHeader[0].doubleHeader },
      noSHeader
    )
  
    return [innerElements, TDoubleLevelHead]
  }
  
  const Header = () => {
    const classes = useStyles()
    const {
      elements,
      enableEdit,
      enableEditText,
      editWidth,
      enableDelete,
      deleteWidth,
      enableToggle,
      toggleWidth,
      orderedBy,
      DEFAULT_COL_SIZE
    } = useContext(TableCtx)
  
    const mapElement2 = (it, idx) => {
      const { width, elements, name } = it
  
      if (elements && elements.length) {
        return (
          <ThDoubleLevel key={idx} width={width} title={name}>
            {elements.map(mapElement)}
          </ThDoubleLevel>
        )
      }
  
      return mapElement(it, idx)
    }
  
    const mapElement = (
      { name, width = DEFAULT_COL_SIZE, header, textAlign },
      idx
    ) => {
      const orderClasses = classnames({
        [classes.orderedBySpan]:
          R.isNil(header) && !R.isNil(orderedBy) && R.equals(name, orderedBy.code)
      })
  
      const attachOrderedByToComplexHeader = header => {
        if (!R.isNil(orderedBy) && R.equals(name, orderedBy.code)) {
          try {
            const cloneHeader = R.clone(header)
            const children = R.path(['props', 'children'], cloneHeader)
            const spanChild = R.find(it => R.equals(it.type, 'span'), children)
            spanChild.props.children = R.append(' -', spanChild.props.children)
            return cloneHeader
          } catch (e) {
            return header
          }
        }
        return header
      }
  
      return (
        <Td header key={idx} width={width} textAlign={textAlign}>
          {!R.isNil(header) ? (
            <>{attachOrderedByToComplexHeader(header) ?? header}</>
          ) : (
            <span className={orderClasses}>
              {startCase(name)}{' '}
              {!R.isNil(orderedBy) && R.equals(name, orderedBy.code) && '-'}
            </span>
          )}
        </Td>
      )
    }
  
    const [innerElements, HeaderElement] = groupSecondHeader(elements)
  
    return (
      <HeaderElement>
        {innerElements.map(mapElement2)}
        {enableEdit && (
          <Td header width={editWidth} textAlign="center">
            {enableEditText ?? `Edit`}
          </Td>
        )}
        {enableDelete && (
          <Td header width={deleteWidth} textAlign="center">
            Delete
          </Td>
        )}
        {enableToggle && (
          <Td header width={toggleWidth} textAlign="center">
            Enable
          </Td>
        )}
      </HeaderElement>
    )
  }
  
  export default Header
  