import React from 'react'
import classnames from 'classnames'
import { string, bool, object, array, node, oneOfType } from 'prop-types'

import { Icon } from '@swrve/icons'

const AccordionItem = ({ children, className, title, onToggle, open, ...props }) => {
  const wrapperStyles = classnames('sw-accordion-item flex flex-col py-2', className)
  const itemStyles = classnames(
    'sw-accordion-toggle uppercase tracking-large rounded-lg text-xs py-3 px-4 font-bold leading-contained ',
    'text-regentGrey flex justify-between items-center',
    { open }
  )
  const itemIcon = open ? 'minus' : 'plus'

  //TODO: Replace with new transition component for collapsing
  const contentStyles = open ? 'block' : 'hidden'

  return (
    <div className={wrapperStyles} {...props}>
      <button
        className={itemStyles}
        onClick={onToggle}
        role="tab"
        aria-expanded={open}
        aria-current={open}
      >
        {title}
        <Icon name={itemIcon} size="xsmall" />
      </button>
      <div className={contentStyles} role="tabpanel">
        {children}
      </div>
    </div>
  )
}

AccordionItem.propTypes = {
  /** Child Content */
  children: node,
  /** Additional externs classnames */
  className: oneOfType([string, object, array]),
  /** Show or hide content */
  open: bool,
  /** Title for the accordion item */
  title: node
}

AccordionItem.defaultProps = {
  open: false
}

AccordionItem.displayName = 'AccordionItem'

export default AccordionItem