index.tsx

import { createElement, FunctionComponent } from 'react'
import { useOvermind } from '../../overmind'
import * as styles from './styles'
import * as textStyles from '../../styles/text'
import Inspector, { RenderPaths } from '../Inspector'
import { css } from 'emotion'

const DerivedWrapper: FunctionComponent = ({ children }) => (
  <div className={styles.label}>
    <div className={styles.labelWrapper}>
      <div className={styles.derivedLabel}>
        <span className={css(textStyles.hint, textStyles.monospace)}>
          derived
        </span>
      </div>
    </div>
    <div>{children}</div>
  </div>
)

const State: FunctionComponent = () => {
  const { state, actions } = useOvermind()

  return (
    <div className={styles.wrapper} onClick={() => actions.undoSettingState()}>
      <Inspector
        value={state.currentApp.state || {}}
        expandedPaths={state.currentApp.expandedStatePaths}
        onClickPath={actions.setState}
        onToggleExpand={actions.toggleExpandState}
        selectedStatePath={state.currentApp.selectedStatePath}
        onSubmitState={actions.submitState}
        renderPaths={
          Object.assign(
            {},
            Object.keys(state.currentApp.derived || {}).reduce(
              (aggr, key) =>
                Object.assign(aggr, {
                  [key]: (children) => (
                    <DerivedWrapper key={key}>{children}</DerivedWrapper>
                  ),
                }),
              {}
            )
          ) as RenderPaths
        }
      />
    </div>
  )
}

export default State