import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Divider, FloatingNotification } from '@wix/design-system';
import { InfoCircle } from '@wix/wix-ui-icons-common';
import type { CmsFormState } from './CmsFormState';
import { BasicsSection } from './Sections/BasicsSection';
import { ValidationAndDefaultsSection } from './Sections/ValidationAndDefaultsSection';

interface Props {
  state: CmsFormState;
}

const _CmsFieldForm = ({ state }: Props) => {
  return (
    <Box direction="vertical" gap="SP2" width={530} maxHeight={600}>
      {state.errorToastConfig && (
        <Box
          position="absolute"
          top="24px"
          left="49%"
          transform="translateX(-50%)"
        >
          <FloatingNotification
            dataHook="cms-field-modal-error-state"
            type="destructive"
            prefixIcon={<InfoCircle />}
            text={state.errorToastConfig.message}
            textButtonProps={
              state.errorToastConfig.action && {
                label: state.errorToastConfig.action.text,
                onClick: () => state.errorToastConfig?.action?.onClick?.(),
              }
            }
            onClose={() => state.setErrorToastConfig(undefined)}
          />
        </Box>
      )}

      {!state.errorToastConfig && state.showValidationError && (
        <Box
          position="absolute"
          top="24px"
          left="49%"
          transform="translateX(-50%)"
        >
          <FloatingNotification
            type="destructive"
            prefixIcon={<InfoCircle />}
            text={state.validationErrorMessage}
            onClose={state.hideValidationError}
          />
        </Box>
      )}

      <BasicsSection state={state} />
      <Divider />

      <ValidationAndDefaultsSection state={state} />
    </Box>
  );
};

export const CmsFieldForm = observer(_CmsFieldForm);
