import { Box, Button, Loader } from '@wix/design-system';
import React from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useFormPageContext } from '../../providers';
import { observer } from 'mobx-react-lite';
import { MoreActionsElement } from '../MoreActions';
import { ActionsBarConfig, ctaKeys } from '@wix/bex-core';
import { useIsMobile } from '../../hooks/useIsMobile';

export interface FormPageActionsBarProps {
  moreActions?: MoreActionsElement;
  onCancel?: () => void;
  onSave?: () => void;
  actionsBarConfig?: ActionsBarConfig;
}

export function _FormPageActionsBar({
  moreActions,
  onCancel,
  onSave,
  actionsBarConfig,
}: FormPageActionsBarProps) {
  const { translate: t, initTask } = useWixPatternsContainer();
  const state = useFormPageContext();
  const isMobile = useIsMobile();

  if (!initTask.status.isSuccess) {
    return null;
  }

  return (
    <Box gap="SP2">
      {isMobile ? undefined : moreActions}
      <Button
        priority="secondary"
        fullWidth={isMobile}
        size={isMobile ? 'small' : 'medium'}
        dataHook="form-page-cancel-btn"
        onClick={onCancel}
      >
        {t('cairo.entityPage.header.cancel.CTA')}
      </Button>
      <Button
        fullWidth={isMobile}
        size={isMobile ? 'small' : 'medium'}
        dataHook="form-page-save-btn"
        onClick={onSave}
      >
        {state.submitTask.status.isLoading ? (
          <Loader size="tiny" />
        ) : (
          t(ctaKeys[actionsBarConfig?.saveCta?.text ?? 'SAVE'])
        )}
      </Button>
    </Box>
  );
}

export const FormPageActionsBar = observer(_FormPageActionsBar);