import React from 'react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { Box } from '@wix/design-system';
import { ManageFieldsPopoverMenu } from './ManageFieldsPopoverMenu';

export function CustomColumnsEditCustomFieldCTAButton({
  field,
}: {
  field: { id: string };
}) {
  const toolbar = useToolbarCollectionContext();
  const state = toolbar.collectionDataExtension?.customFieldsPanel;

  if (!state || state.dataExtension.disableUserDefinedWriting) {
    return null;
  }

  return (
    <Box>
      <ManageFieldsPopoverMenu
        state={state}
        id={field.id}
        origin="Custom columns panel"
        location="Customize columns action cell"
      />
      <Box paddingInlineEnd="12px" />
    </Box>
  );
}
