import React from 'react';
import { observer } from 'mobx-react-lite';
import { CustomActionModal } from '../ActionModal';
import { CmsFieldForm } from './CmsFieldForm';
import { CmsFieldModalState } from './CmsFieldModalState';
import { classes } from './CmsFieldModal.st.css.js';

export const CmsFieldModal = observer(
  ({ state }: { state: CmsFieldModalState }) => {
    const { formState } = state;

    return (
      <CustomActionModal
        dataHook="cms-field-modal"
        state={state.modal}
        onAfterClose={() => state.reset()}
        title={formState?.mode === 'edit' ? 'Edit field' : 'Add a field'}
        content={formState ? <CmsFieldForm state={formState} /> : null}
        primaryButtonText="Save"
        secondaryButtonText="Cancel"
        width={600}
        showFooterDivider
        className={classes.modal}
      />
    );
  },
);