import {
  Box,
  IconButton,
  PopoverMenu,
  TableListItem,
  Text,
  Tooltip,
} from '@wix/design-system';
import React, { CSSProperties, useMemo } from 'react';
import {
  DeleteSmall,
  LockLockedFilledSmall,
  MoreSmall,
  UndoSmall,
} from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
import type { ArchivedItem } from './types';

export interface ArchivedItemsListItemProps {
  item: ArchivedItem;
  showDivider?: boolean;
  onRestore: (item: ArchivedItem) => void;
  onDelete: (item: ArchivedItem) => void;
  dataHook?: string;
}

function _ArchivedItemsListItem({
  item,
  showDivider,
  onRestore,
  onDelete,
  dataHook = 'custom-columns',
}: ArchivedItemsListItemProps) {
  const { translate: t } = useWixPatternsContainer();
  const { stackingRootRef } = usePageContext();
  const isPii = item.isPii;
  const style = useMemo<CSSProperties>(
    () => ({
      padding: '0 6px',
      wordBreak: 'break-word',
    }),
    [],
  );

  const moreActionsButton = (
    <PopoverMenu
      textSize="small"
      placement="bottom-end"
      appendTo={stackingRootRef.current || 'parent'}
      dataHook={`${dataHook}-archived-item-options-${item.id}`}
      triggerElement={
        <Tooltip content={t('cairo.archivedFields.more-actions.tooltip')}>
          <IconButton
            size="tiny"
            dataHook={`${dataHook}-archived-item-options-trigger`}
            skin="light"
          >
            <MoreSmall />
          </IconButton>
        </Tooltip>
      }
    >
      <PopoverMenu.MenuItem
        dataHook={`${dataHook}-archived-item-options-restore`}
        prefixIcon={<UndoSmall />}
        text={t('cairo.archivedFields.more-actions.restore')}
        onClick={() => onRestore(item)}
      />

      <PopoverMenu.MenuItem
        dataHook={`${dataHook}-archived-item-options-delete`}
        prefixIcon={<DeleteSmall />}
        text={t('cairo.archivedFields.more-actions.delete')}
        onClick={() => onDelete(item)}
      />
    </PopoverMenu>
  );

  return (
    <TableListItem
      showDivider={showDivider}
      data-hook={`${dataHook}-archived-item-${item.id}`}
      options={[
        {
          value: (
            <Box>
              <div style={style}>
                <Text
                  size="small"
                  weight="normal"
                  dataHook={`${dataHook}-archived-item-label`}
                >
                  {item.label || item.id}
                </Text>
              </div>
            </Box>
          ),
        },
        {
          value: (
            <Box gap="SP1" verticalAlign="middle">
              {isPii && (
                <Tooltip
                  content={t(
                    'cairo.table.custom-columns.indication.pii.tooltip',
                  )}
                  appendTo="window"
                >
                  <Box align="center" verticalAlign="middle" color="G10">
                    <LockLockedFilledSmall />
                  </Box>
                </Tooltip>
              )}
              {moreActionsButton}
            </Box>
          ),
          align: 'right' as const,
        },
      ]}
    />
  );
}

export const ArchivedItemsListItem = _ArchivedItemsListItem;