import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Divider, ToastContainer } from '@wix/design-system';
import type { CmsFormState } from './CmsFormState';
import { BasicsSection } from './Sections/BasicsSection';
import { ValidationAndDefaultsSection } from './Sections/ValidationAndDefaultsSection';
import { StatusToastFromConfig } from '../StatusToastFromConfig';
import { classes } from './CmsFieldForm.st.css.js';

interface Props {
  state: CmsFormState;
}

const _CmsFieldForm = ({ state }: Props) => {
  const validationToastConfig = state.showValidationError
    ? { message: state.validationErrorMessage, type: 'ERROR' as const }
    : undefined;
  const activeToastConfig = state.errorToastConfig ?? validationToastConfig;
  const onCloseToast = state.errorToastConfig
    ? () => state.setErrorToastConfig(undefined)
    : state.hideValidationError;

  return (
    <Box direction="vertical" maxHeight={600}>
      <ToastContainer>
        {activeToastConfig && (
          <StatusToastFromConfig
            config={activeToastConfig}
            onClose={onCloseToast}
            dataHook={
              state.errorToastConfig
                ? 'cms-field-modal-error-state'
                : 'cms-field-modal-validation-state'
            }
          />
        )}
      </ToastContainer>

      <BasicsSection state={state} />
      <Box className={classes.fullBleedDivider}>
        <Divider />
      </Box>
      <ValidationAndDefaultsSection state={state} />
    </Box>
  );
};

export const CmsFieldForm = observer(_CmsFieldForm);