// /* eslint-disable import/prefer-default-export */
import { Disclosure } from '@headlessui/react'
import { ReactElement } from 'react'
import { MdKeyboardArrowRight, MdKeyboardArrowUp } from 'react-icons/md'

export interface CollapseProps {
  buttonLabel: string | ReactElement
  defaultOpen?: boolean
  open?: boolean
  buttonIcon?: ReactElement
  content: ReactElement
  onClick?: () => void
  buttonClassName?: string
}

export const Collapse = (props: CollapseProps) => {
  const { buttonLabel, buttonIcon, defaultOpen, open: controlledOpen, content, onClick, buttonClassName } = props

  const isControlled = controlledOpen !== undefined

  return (
    <Disclosure defaultOpen={defaultOpen}>
      {({ open }) => {
        const isOpen = isControlled ? controlledOpen : open

        return (
          <div>
            <Disclosure.Button
              className={`w-full btn-md btn-ghost rounded-lg uppercase font-bold ${buttonClassName ?? ''}`}
              onClick={onClick}
            >
              <div className="flex justify-between items-center w-full gap-4 text-gray-600">
                {buttonIcon && buttonIcon}
                <p className="flex flex-1 tracking-wider text-secondary text-left">{buttonLabel}</p>

                {!isOpen ? <MdKeyboardArrowRight size={20} /> : <MdKeyboardArrowUp size={20} />}
              </div>
            </Disclosure.Button>

            {isOpen && (
              <Disclosure.Panel static={isControlled} className="text-gray-500">
                {content}
              </Disclosure.Panel>
            )}
          </div>
        )
      }}
    </Disclosure>
  )
}