import React from 'react';
import { Box, Button } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { Add } from '@wix/wix-ui-icons-common';
import { CustomFieldsWidgetState } from '../../state';
import { ManageFieldsCTAButton } from '../CustomFieldsPanel/ManageFieldsCTAButton';
import { CustomFieldsDisabledTooltip } from '../CustomFields';

export interface CustomFieldsWidgetActionsProps {
  state: CustomFieldsWidgetState;
}

const _ActionButtons = ({ state }: CustomFieldsWidgetActionsProps) => {
  const {
    container: { translate: t },
  } = state;

  return (
    <Box gap="SP2">
      <CustomFieldsDisabledTooltip
        disabled={state.dataExtension.disableAddCustomField}
        content={state.dataExtension.disableAddCustomFieldContent}
      >
        <Button
          dataHook="add-custom-field-btn"
          prefixIcon={<Add />}
          size="small"
          priority="secondary"
          onClick={() => {
            state.customFieldsPanel.openCustomFieldModal({
              origin: 'Custom fields widget',
            });
          }}
        >
          {t('cairo.customFields.addCustomField.CTA')}
        </Button>
      </CustomFieldsDisabledTooltip>
      <ManageFieldsCTAButton state={state} origin="Custom fields widget" />
    </Box>
  );
};

export const ActionButtons = observer(_ActionButtons);