import React from 'react';
import { observer } from 'mobx-react-lite';
import { Accordion, Box, FormField, Input } from '@wix/design-system';
import type { CmsFormState } from '../CmsFormState';
import { ValidationSubSection } from './ValidationSubSection';
import { classes } from './ValidationAndDefaultsSection.st.css.js';

interface Props {
  state: CmsFormState;
}

const _ValidationAndDefaultsSection = ({ state }: Props) => {
  const hasValidation = state.supportedValidationRules.length > 0;

  return (
    <div className={classes.accordionWrapper}>
      <Accordion
        skin="light"
        hideShadow
        horizontalPadding="large"
        items={[
          {
            title: 'Validation and defaults',
            toggleIconPlacement: 'start',
            children: (
              <Box direction="vertical" gap="SP3">
                {hasValidation && <ValidationSubSection state={state} />}

                <FormField
                  label="Help text"
                  infoContent="Descriptive text shown below the field in forms."
                >
                  <Input
                    value={state.properties.helpText}
                    onChange={(e) => state.setHelpText(e.target.value)}
                  />
                </FormField>
              </Box>
            ),
          },
        ]}
      />
    </div>
  );
};

export const ValidationAndDefaultsSection = observer(
  _ValidationAndDefaultsSection,
);