import React, { useCallback, useRef } from 'react';
import { CellVideoEdit } from '@wix/patterns-fields';
import type { CellEditProps } from '../../types';

export const VideoEdit: React.FC<CellEditProps<string | null>> = ({
  value,
  onChange,
  onCommit,
  onCancel,
  onStartEdit,
  inputRef,
}) => {
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const requestCellFocus = useCallback(() => {
    const cell = wrapperRef.current?.closest(
      '[role="gridcell"]',
    ) as HTMLElement | null;
    cell?.focus({ preventScroll: true });
  }, []);

  return (
    <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>
      <CellVideoEdit
        value={value}
        onChange={onChange}
        onCommit={onCommit}
        onCancel={onCancel}
        onStartEdit={onStartEdit}
        inputRef={inputRef}
        onRequestCellFocus={requestCellFocus}
        dataHook="video-edit"
      />
    </div>
  );
};
