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

function _FieldsSourceAddFieldCTA({
  source,
}: {
  source: CollectionFieldsSourceState;
}) {
  const { translate: t } = useWixPatternsContainer();
  const fm = source.fieldsSource.fieldManagement;

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

  return (
    <Box direction="vertical" width="100%">
      <Divider direction="horizontal" />
      <Box
        padding="SP4"
        width="100%"
        boxSizing="border-box"
        direction="vertical"
      >
        <CustomFieldsDisabledHint
          disabled={fm.addFieldDisabled}
          content={fm.addFieldDisabledHint ?? ''}
        >
          <AddItem
            dataHook="custom-columns-add-field"
            onClick={() =>
              source.openFieldModal({ origin: 'Custom columns panel' })
            }
          >
            {t('cairo.customFields.addCustomField.CTA')}
          </AddItem>
        </CustomFieldsDisabledHint>
      </Box>
    </Box>
  );
}

export const FieldsSourceAddFieldCTA = observer(_FieldsSourceAddFieldCTA);