index.tsx

import { createElement, SFC } from 'react'
import { useOvermind } from '../../overmind'
import { Flush as FlushType } from '../../overmind/types'
import * as actionStyles from '../Action/styles'
import * as styles from './styles'
import * as textStyles from '../../styles/text'
import Path from '../ActionPath'
import Icon from '../common/Icon'

type Props = {
  flush: FlushType
}

const ActionFlush: SFC<Props> = ({ flush }) => {
  const { state, actions } = useOvermind()
  const isExpanded = state.expandAllActionDetails || !flush.isCollapsed

  return (
    <div className={actionStyles.pipe}>
      <Path />
      <div className={styles.flush}>
        <div
          className={styles.flushHeader}
          onClick={() => actions.toggleCollapsedFlush(flush.flushId)}
        >
          <span className={textStyles.hint}>
            <Icon>code</Icon> {flush.components.length}
          </span>
          <span className={textStyles.hint}>
            <Icon>chain</Icon> {flush.derived.length}
          </span>
          {flush.components.length || flush.derived.length ? (
            <span className={textStyles.hint}>
              {isExpanded ? <Icon>chevron-down</Icon> : <Icon>chevron-up</Icon>}
            </span>
          ) : (
            <span className={textStyles.hint} />
          )}
        </div>
        {isExpanded ? (
          <div>
            {flush.components.map((componentId) => (
              <div key={componentId}>
                <span className={textStyles.hint}>
                  <Icon>code</Icon>{' '}
                  {state.currentApp.components[componentId].name}
                </span>
              </div>
            ))}
            {flush.derived.map((derivedPath) => (
              <div key={derivedPath}>
                <span className={textStyles.hint}>
                  <Icon>chain</Icon> {derivedPath}
                </span>
              </div>
            ))}
          </div>
        ) : null}
      </div>
    </div>
  )
}
export default ActionFlush