import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
import { Button } from '@langgenius/dify-ui/button'
import { useTranslation } from 'react-i18next'
import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
import BlockIcon from '@/app/components/workflow/block-icon'
import { useToolIcon } from '@/app/components/workflow/hooks'
import { BlockEnum } from '@/app/components/workflow/types'

type ConnectProps = {
  nodeData: DataSourceNodeType
  onSetting: () => void
}

const Connect = ({
  nodeData,
  onSetting,
}: ConnectProps) => {
  const { t } = useTranslation()
  const toolIcon = useToolIcon(nodeData)

  return (
    <div className="flex flex-col items-start gap-y-2 rounded-xl bg-workflow-process-bg p-6">
      <div className="flex size-12 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5">
        <BlockIcon
          type={BlockEnum.DataSource}
          toolIcon={toolIcon}
          size="md"
        />
      </div>
      <div className="flex flex-col gap-y-1">
        <div className="flex flex-col gap-y-1 pt-1 pb-3">
          <div className="system-md-semibold text-text-secondary">
            <span className="relative">
              {t('onlineDrive.notConnected', { ns: 'datasetPipeline', name: nodeData.title })}
              <Icon3Dots className="absolute -top-1.5 -right-2.5 size-4 text-text-secondary" />
            </span>
          </div>
          <div className="system-sm-regular text-text-tertiary">
            {t('onlineDrive.notConnectedTip', { ns: 'datasetPipeline', name: nodeData.title })}
          </div>
        </div>
        <Button className="w-fit" variant="primary" onClick={onSetting}>
          {t('stepOne.connect', { ns: 'datasetCreation' })}
        </Button>
      </div>
    </div>
  )
}

export default Connect