import { AddItem } from '@wix/design-system';
import React from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { CustomFieldsDisabledHint } from '../CustomFields';
import { observer } from 'mobx-react-lite';
import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';

export interface AddCustomFieldCTAButtonProps {
  state: CustomFieldsPanelState;
  onClick?: () => void;
  dataHook?: string;
}

function _AddCustomFieldCTAButton({
  state,
  onClick,
  dataHook = 'data-extension-add-new',
}: AddCustomFieldCTAButtonProps) {
  const container = useWixPatternsContainer();
  const { translate: t } = container;

  if (!state.fieldManagement?.canAddFields) {
    return null;
  }

  return (
    <CustomFieldsDisabledHint
      disabled={state.fieldManagement?.addFieldDisabled}
      content={state.fieldManagement?.addFieldDisabledHint ?? ''}
    >
      <AddItem dataHook={dataHook} onClick={onClick}>
        {t('cairo.customFields.addCustomField.CTA')}
      </AddItem>
    </CustomFieldsDisabledHint>
  );
}

export const AddCustomFieldCTAButton = observer(_AddCustomFieldCTAButton);