import React, { useCallback } from 'react'

import { useCollapse, CollapsePanelProps, Collapse } from 'react-icecream'
import { RightThinIcon } from 'react-icecream/icons'

function GhostPanel(props: CollapsePanelProps<number>) {
  const { title, value, children } = props
  const { value: activeValue, toggleActive } = useCollapse<number>()
  const isExpanded = activeValue.indexOf(value) !== -1

  const handleNameClick = useCallback(() => {
    toggleActive(value)
  }, [toggleActive, value])

  return (
    <div>
      <div style={{ display: 'flex', cursor: 'pointer', padding: '15px 0 0 18px' }} onClick={handleNameClick}>
        <div style={{ height: 14, margin: 'auto 14px auto 0' }}><RightThinIcon style={{ transform: isExpanded ? 'rotateZ(90deg)' : 'none' }} /></div>
        <div>{title}</div>
      </div>
      {isExpanded && (
        <div style={{ padding: 16 }}>
          {children}
        </div>
      )}
    </div>
  )
}

export default function Demo() {
  return (
    <Collapse>
      <GhostPanel title="面板标题1" value={1}>
        ghost panel 1
      </GhostPanel>
      <GhostPanel title="面板标题2" value={2}>
        ghost panel 2
      </GhostPanel>
    </Collapse>
  )
}