'use client'
import { useHover } from 'ahooks'
import { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Economic, HighQuality } from '@/app/components/base/icons/src/vender/knowledge'
import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { cn } from '@/utils/classnames'
import { IndexingType } from '../../create/step-two'
import { EffectColor } from '../chunk-structure/types'
import OptionCard from '../option-card'
import KeywordNumber from './keyword-number'

type IndexMethodProps = {
  value: IndexingType
  onChange: (id: IndexingType) => void
  disabled?: boolean
  currentValue?: IndexingType
  keywordNumber: number
  onKeywordNumberChange: (value: number) => void
}

const IndexMethod = ({
  value,
  onChange,
  disabled,
  currentValue,
  keywordNumber,
  onKeywordNumberChange,
}: IndexMethodProps) => {
  const { t } = useTranslation()
  const economyDomRef = useRef<HTMLDivElement>(null)
  const isHoveringEconomy = useHover(economyDomRef)
  const isEconomyDisabled = currentValue === IndexingType.QUALIFIED

  return (
    <div className={cn('flex flex-col gap-y-2')}>
      {/* High Quality */}
      <OptionCard
        id={IndexingType.QUALIFIED}
        isActive={value === IndexingType.QUALIFIED}
        onClick={onChange}
        icon={<HighQuality className="size-[18px]" />}
        iconActiveColor="text-util-colors-orange-orange-500"
        title={t('stepTwo.qualified', { ns: 'datasetCreation' })}
        description={t('form.indexMethodHighQualityTip', { ns: 'datasetSettings' })}
        disabled={disabled}
        isRecommended
        effectColor={EffectColor.orange}
        showEffectColor
        className="gap-x-2"
      />
      {/* Economy */}
      <PortalToFollowElem
        open={isHoveringEconomy}
        offset={4}
        placement="right"
      >
        <PortalToFollowElemTrigger>
          <OptionCard
            ref={economyDomRef}
            id={IndexingType.ECONOMICAL}
            isActive={value === IndexingType.ECONOMICAL}
            onClick={onChange}
            icon={<Economic className="size-[18px]" />}
            iconActiveColor="text-util-colors-indigo-indigo-600"
            title={t('form.indexMethodEconomy', { ns: 'datasetSettings' })}
            description={t('form.indexMethodEconomyTip', { ns: 'datasetSettings', count: keywordNumber })}
            disabled={disabled || isEconomyDisabled}
            effectColor={EffectColor.indigo}
            showEffectColor
            showChildren
            className="gap-x-2"
          >
            <KeywordNumber
              keywordNumber={keywordNumber}
              onKeywordNumberChange={onKeywordNumberChange}
            />
          </OptionCard>
        </PortalToFollowElemTrigger>
        <PortalToFollowElemContent style={{ zIndex: 60 }}>
          <div className="rounded-lg border-components-panel-border bg-components-tooltip-bg p-3 text-xs font-medium text-text-secondary shadow-lg">
            {t('form.indexMethodChangeToEconomyDisabledTip', { ns: 'datasetSettings' })}
          </div>
        </PortalToFollowElemContent>
      </PortalToFollowElem>
    </div>
  )
}

export default IndexMethod