import React from 'react';

import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import {
  Button,
  ButtonColor,
  ButtonVariant,
  ButtonType,
  Form,
  ButtonGroup,
} from 'react-magma-dom';

export interface FormTemplateProps {
  formFields: any;
  schema: any;
}

export const FormTemplate = ({
  formFields,
  schema: { cancelLabel, submitLabel },
  schema,
}: FormTemplateProps) => {
  const { handleSubmit, onCancel, getState } = useFormApi();
  const { submitting, pristine } = getState();

  const actions = (
    <ButtonGroup>
      <Button
        disabled={pristine}
        variant={ButtonVariant.link}
        onClick={onCancel}
      >
        {cancelLabel || 'Cancel'}
      </Button>
      <Button
        disabled={submitting}
        type={ButtonType.submit}
        color={ButtonColor.primary}
      >
        {submitLabel || 'Submit'}
      </Button>
    </ButtonGroup>
  );

  const actionsVisible = React.useMemo(() => {
    return true;
  }, []);

  return (
    <Form
      onSubmit={handleSubmit}
      header={schema.title}
      description={schema.description}
      actions={actionsVisible ? actions : undefined}
    >
      {formFields}
    </Form>
  );
};