import React, { useRef, useState } from 'react'

import { Collapse, Flex, Text } from '@mantine/core'
import { Link } from 'react-router-dom'

interface CollapseCardProps {
  defaultExpanded?: boolean
  expandElement?: React.ReactNode
  onClickCollapse?: (open: boolean) => void
  link?: {
    label: string
    path: string
    onClick?: () => void
  }
}

export const CollapseCard: React.FC<
  React.PropsWithChildren<CollapseCardProps>
> = ({
  expandElement = null,
  defaultExpanded = false,
  link,
  onClickCollapse,
  children
}) => {
  const initRef = useRef(false)
  const [expanded, setExpanded] = useState(defaultExpanded)
  const [hideElement, setHideElement] = useState(!defaultExpanded)
  return (
    <div
      className={`ease-in transition-all ${
        expanded ? `py-3` : `py-6`
      } px-5 border-[1px] border-solid border-[#91caff] rounded-lg bg-[#e6f4ff]`}
    >
      <Flex justify='space-between' align='center'>
        <div className='grow-0 max-w-[85%]'>{children}</div>
        {!!link ? (
          <Link
            className='select-none'
            to={link.path}
            target='_blank'
            onClick={() => link.onClick?.()}
          >
            {link.label}
          </Link>
        ) : (
          <Text
            className='select-none w-32 shrink-0 text-right'
            component='a'
            c='blue'
            onClick={() => {
              if (!expanded && !initRef.current) {
                initRef.current = true
                setHideElement(false)
              }
              setExpanded((v) => {
                onClickCollapse?.(!v)
                return !v
              })
            }}
          >
            {expanded ? 'Collapse' : 'Expand'}
          </Text>
        )}
      </Flex>
      <Collapse in={expanded}>{hideElement ? null : expandElement}</Collapse>
    </div>
  )
}