twenty/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx

import { Key } from 'ts-key-enum';
import { IconArrowUpRight, IconPencil } from 'twenty-ui';

import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
import { Activity } from '@/activities/types/Activity';
import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';

type ActivityTargetsInlineCellProps = {
  activity: Activity;
  showLabel?: boolean;
  maxWidth?: number;
  readonly?: boolean;
};

export const ActivityTargetsInlineCell = ({
  activity,
  showLabel = true,
  maxWidth,
  readonly,
}: ActivityTargetsInlineCellProps) => {
  const { activityTargetObjectRecords } =
    useActivityTargetObjectRecords(activity);
  const { closeInlineCell } = useInlineCell();

  useScopedHotkeys(
    Key.Escape,
    () => {
      closeInlineCell();
    },
    ActivityEditorHotkeyScope.ActivityTargets,
  );

  return (
    <RecordFieldInputScope recordFieldInputScopeId={activity?.id ?? ''}>
      <RecordInlineCellContainer
        buttonIcon={IconPencil}
        customEditHotkeyScope={{
          scope: ActivityEditorHotkeyScope.ActivityTargets,
        }}
        IconLabel={showLabel ? IconArrowUpRight : undefined}
        showLabel={showLabel}
        readonly={readonly}
        editModeContent={
          <ActivityTargetInlineCellEditMode
            activity={activity}
            activityTargetWithTargetRecords={activityTargetObjectRecords}
          />
        }
        label="Relations"
        displayModeContent={({ cellElement }) => (
          <ActivityTargetChips
            anchorElement={cellElement}
            activityTargetObjectRecords={activityTargetObjectRecords}
            maxWidth={maxWidth}
          />
        )}
        isDisplayModeContentEmpty={activityTargetObjectRecords.length === 0}
      />
    </RecordFieldInputScope>
  );
};