import { Collapse, Flex, Typography } from 'antd'
import { CaretLeftOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'

const { Title } = Typography

const InfoCollapse = ({
  title,
  icon,
  children,
  active,
  onToggle,
  className = '',
  collapseKey = 'default',
  canCollapse = true,
  dragHandle = null,
  extra = null
}) => {
  return (
    <Collapse
      ghost
      expandIconPosition='end'
      activeKey={canCollapse ? (active ? [collapseKey] : []) : [collapseKey]}
      onChange={(keys) => {
        if (!canCollapse) return
        onToggle(keys.length > 0)
      }}
      expandIcon={({ isActive }) =>
        canCollapse ? (
          <CaretLeftOutlined
            rotate={isActive ? -90 : 0}
            className='info-collapse-expand-icon'
          />
        ) : null
      }
      className={`no-h-padding-collapse ${className} info-collapse`}
      items={[
        {
          key: collapseKey,
          children: children,
          label: (
            <Flex align='center' gap={'middle'} className='info-collapse-label'>
              {dragHandle}
              {icon}
              <Title level={5} style={{ margin: 0 }}>
                {title}
              </Title>
              {extra}
            </Flex>
          )
        }
      ]}
    />
  )
}

InfoCollapse.propTypes = {
  title: PropTypes.string.isRequired,
  icon: PropTypes.node.isRequired,
  children: PropTypes.node.isRequired,
  active: PropTypes.bool.isRequired,
  onToggle: PropTypes.func.isRequired,
  className: PropTypes.string,
  collapseKey: PropTypes.string,
  canCollapse: PropTypes.bool,
  dragHandle: PropTypes.node,
  extra: PropTypes.node
}

export default InfoCollapse