import type { CSSProperties } from 'react'
import type { NotionPageRow as NotionPageRowData, NotionPageSelectionMode } from './types'
import { Checkbox } from '@langgenius/dify-ui/checkbox'
import { cn } from '@langgenius/dify-ui/cn'
import { Radio } from '@langgenius/dify-ui/radio'
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import NotionIcon from '@/app/components/base/notion-icon'

type NotionPageRowProps = {
  checked: boolean
  disabled: boolean
  isPreviewed: boolean
  onPreview: (pageId: string) => void
  onSelect: (pageId: string) => void
  onToggle: (pageId: string) => void
  row: NotionPageRowData
  searchValue: string
  selectionMode: NotionPageSelectionMode
  showPreview: boolean
  style: CSSProperties
}

const NotionPageRow = ({
  checked,
  disabled,
  isPreviewed,
  onPreview,
  onSelect,
  onToggle,
  row,
  searchValue,
  selectionMode,
  showPreview,
  style,
}: NotionPageRowProps) => {
  const { t } = useTranslation()
  const pageId = row.page.page_id
  const breadcrumbs = row.ancestors.length
    ? [...row.ancestors, row.page.page_name]
    : [row.page.page_name]

  return (
    <div
      className={cn(
        'group flex cursor-pointer items-center rounded-md pr-[2px] pl-2 hover:bg-state-base-hover',
        isPreviewed && 'bg-state-base-hover',
      )}
      style={style}
      data-testid={`notion-page-row-${pageId}`}
    >
      {selectionMode === 'multiple' ? (
        <Checkbox
          className="mr-2 shrink-0"
          checked={checked}
          disabled={disabled}
          aria-label={row.page.page_name}
          onCheckedChange={() => onSelect(pageId)}
        />
      ) : (
        <Radio
          className="mr-2 shrink-0"
          value={pageId}
          disabled={disabled}
          aria-label={row.page.page_name}
        />
      )}
      {!searchValue && row.hasChild && (
        <div
          className="mr-1 flex size-5 shrink-0 items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover"
          style={{ marginLeft: row.depth * 8 }}
          onClick={() => onToggle(pageId)}
          data-testid={`notion-page-toggle-${pageId}`}
        >
          {row.expand ? (
            <RiArrowDownSLine className="size-4 text-text-tertiary" />
          ) : (
            <RiArrowRightSLine className="size-4 text-text-tertiary" />
          )}
        </div>
      )}
      {!searchValue && !row.hasChild && row.parentExists && (
        <div className="mr-1 size-5 shrink-0" style={{ marginLeft: row.depth * 8 }} />
      )}
      <NotionIcon className="mr-1 shrink-0" type="page" src={row.page.page_icon} />
      <div
        className="grow truncate text-[13px] leading-4 font-medium text-text-secondary"
        title={row.page.page_name}
      >
        {row.page.page_name}
      </div>
      {showPreview && (
        <div
          className="ml-1 hidden h-6 shrink-0 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-xs leading-4 font-medium text-components-button-secondary-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px] group-hover:flex hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover"
          onClick={() => onPreview(pageId)}
          data-testid={`notion-page-preview-${pageId}`}
        >
          {t(($) => $['dataSource.notion.selector.preview'], { ns: 'common' })}
        </div>
      )}
      {searchValue && (
        <div
          className="ml-1 max-w-[120px] shrink-0 truncate text-xs text-text-quaternary"
          title={breadcrumbs.join(' / ')}
        >
          {breadcrumbs.join(' / ')}
        </div>
      )}
    </div>
  )
}

export default memo(NotionPageRow)
