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

export function CustomColumnsAddCustomFieldCTAButton() {
  const toolbar = useToolbarCollectionContext();
  const state = toolbar.collectionDataExtension?.customFieldsPanel;

  if (!state) {
    return null;
  }

  return (
    <Box direction="vertical" width="100%">
      <Divider direction="horizontal" />
      <Box
        padding="SP4"
        width="100%"
        boxSizing="border-box"
        direction="vertical"
      >
        <AddCustomFieldCTAButton
          dataHook="custom-columns-data-extension-add-new"
          state={state}
          onClick={() => {
            state.openCustomFieldModal({
              origin: 'Custom columns panel',
            });
          }}
        />
      </Box>
    </Box>
  );
}
