import type { ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import {
  memo,
  useState,
} from 'react'
import { Infotip } from '@/app/components/base/infotip'

export type FieldTitleProps = {
  title?: string
  operation?: ReactNode
  subTitle?: string | ReactNode
  tooltip?: string
  warningDot?: boolean
  showArrow?: boolean
  disabled?: boolean
  collapsed?: boolean
  onCollapse?: (collapsed: boolean) => void
}
export const FieldTitle = memo(({
  title,
  operation,
  subTitle,
  tooltip,
  warningDot,
  showArrow,
  disabled,
  collapsed,
  onCollapse,
}: FieldTitleProps) => {
  const [collapsedLocal, setCollapsedLocal] = useState(true)
  const collapsedMerged = collapsed !== undefined ? collapsed : collapsedLocal

  return (
    <div className={cn('mb-0.5', !!subTitle && 'mb-1')}>
      <div
        className="group/collapse flex items-center justify-between py-1"
        onClick={() => {
          if (!disabled) {
            setCollapsedLocal(!collapsedMerged)
            onCollapse?.(!collapsedMerged)
          }
        }}
      >
        <div className="flex items-center system-sm-semibold-uppercase text-text-secondary">
          <span className="relative">
            {warningDot && (
              <span className="absolute top-1/2 left-[-9px] size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
            )}
            {title}
          </span>
          {
            showArrow && (
              <span
                aria-hidden
                className={cn(
                  'i-custom-vender-solid-general-arrow-down-round-fill size-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
                  collapsedMerged && 'rotate-270',
                )}
              />
            )
          }
          {
            tooltip && (
              <Infotip aria-label={tooltip} className="ml-1">
                {tooltip}
              </Infotip>
            )
          }
        </div>
        {operation}
      </div>
      {
        subTitle
      }
    </div>
  )
})
