import React, { useCallback } from 'react';
import { CellMediaGalleryEdit } from '@wix/patterns-fields';
import type { WixCodeGalleryItem } from '@wix/patterns-fields/auto-field-types';
import type { CellEditProps } from '../../types';

export const MediaGalleryEdit: React.FC<
  CellEditProps<WixCodeGalleryItem[] | null>
> = ({ value, onChange, onCommit, onCancel, onStartEdit, inputRef }) => {
  const handleChange = useCallback(
    (items: WixCodeGalleryItem[] | null) => onChange(items),
    [onChange],
  );

  return (
    <CellMediaGalleryEdit
      value={value}
      onChange={handleChange}
      onCommit={onCommit}
      onCancel={onCancel}
      onStartEdit={onStartEdit}
      inputRef={inputRef}
      dataHook="media-gallery-edit"
    />
  );
};

export default MediaGalleryEdit;
