import {
  Box,
  IconButton,
  PopoverMenu,
  TableListItem,
  Text,
  Tooltip,
} from '@wix/design-system';
import React, { CSSProperties, useMemo } from 'react';
import { DeleteSmall, MoreSmall, UndoSmall } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } 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 style = useMemo<CSSProperties>(
    () => ({
      padding: '0 6px',
      wordBreak: 'break-word',
    }),
    [],
  );

  const moreActionsButton = (
    <PopoverMenu
      textSize="small"
      placement="bottom-end"
      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" dataHook={`${dataHook}-archived-item-label`}>
                  {item.label || item.id}
                </Text>
              </div>
            </Box>
          ),
        },
        {
          value: moreActionsButton,
          align: 'right' as const,
        },
      ]}
    />
  );
}

export const ArchivedItemsListItem = _ArchivedItemsListItem;
