'use client'
import type { InputVarType } from '@/app/components/workflow/types'
import type { InputVar } from '@/models/pipeline'
import { cn } from '@langgenius/dify-ui/cn'
import { RiDeleteBinLine, RiDraggable, RiEditLine } from '@remixicon/react'
import { useHover } from 'ahooks'
import * as React from 'react'
import { useCallback, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
import Badge from '@/app/components/base/badge'
import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'

type FieldItemProps = {
  readonly?: boolean
  payload: InputVar
  index: number
  onClickEdit: (id: string) => void
  onRemove: (index: number) => void
}

const FieldItem = ({ readonly, payload, index, onClickEdit, onRemove }: FieldItemProps) => {
  const { t } = useTranslation()

  const ref = useRef(null)
  const isHovering = useHover(ref)

  const handleOnClickEdit = useCallback(
    (e: React.MouseEvent) => {
      e.stopPropagation()
      if (readonly) return
      onClickEdit(payload.variable)
    },
    [onClickEdit, payload.variable, readonly],
  )

  const handleRemove = useCallback(
    (e: React.MouseEvent) => {
      e.stopPropagation()
      if (readonly) return
      onRemove(index)
    },
    [index, onRemove, readonly],
  )

  return (
    <div
      ref={ref}
      className={cn(
        'handle flex h-8 cursor-pointer items-center justify-between gap-x-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-1 pl-2 shadow-xs hover:shadow-sm',
        isHovering && !readonly ? 'cursor-all-scroll pr-1' : 'pr-2.5',
        readonly && 'cursor-default',
      )}
      // onClick={handleOnClickEdit}
    >
      <div className="flex grow basis-0 items-center gap-x-1 overflow-hidden">
        {isHovering && !readonly ? (
          <RiDraggable className="size-4 shrink-0 text-text-quaternary" />
        ) : (
          <InputField className="size-4 shrink-0 text-text-accent" />
        )}
        <div
          title={payload.variable}
          className="max-w-[130px] shrink-0 truncate system-sm-medium text-text-secondary"
        >
          {payload.variable}
        </div>
        {payload.label && (
          <>
            <div className="shrink-0 system-xs-regular text-text-quaternary">·</div>
            <div
              title={payload.label}
              className="grow truncate system-xs-medium text-text-tertiary"
            >
              {payload.label}
            </div>
          </>
        )}
      </div>
      {isHovering && !readonly ? (
        <div className="flex shrink-0 items-center gap-x-1">
          <ActionButton className="mr-1" onClick={handleOnClickEdit}>
            <RiEditLine className="size-4 text-text-tertiary" />
          </ActionButton>
          <ActionButton onClick={handleRemove}>
            <RiDeleteBinLine className="size-4 text-text-tertiary group-hover:text-text-destructive" />
          </ActionButton>
        </div>
      ) : (
        <div className="flex shrink-0 items-center gap-x-2">
          {payload.required && (
            <Badge>{t(($) => $['nodes.start.required'], { ns: 'workflow' })}</Badge>
          )}
          <InputVarTypeIcon
            type={payload.type as unknown as InputVarType}
            className="size-3 text-text-tertiary"
          />
        </div>
      )}
    </div>
  )
}
export default React.memo(FieldItem)
