import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box } from '@wix/design-system';
import type { CmsFormState } from '../CmsFormState';
import { isPIISupportedByFieldType } from '../fieldTypeUtils';
import { FieldTypeSelect } from '../formFields/FieldTypeSelect';
import { FieldNameInput } from '../formFields/FieldNameInput';
import { FieldPiiToggle } from '../formFields/FieldPiiToggle';

interface Props {
  state: CmsFormState;
}

const _BasicsSection = ({ state }: Props) => {
  const { properties, visibleErrors, mode } = state;

  return (
    <Box direction="vertical" gap="SP4">
      <FieldTypeSelect
        label="Field type"
        value={properties.type}
        onChange={state.changeType}
        disabled={mode === 'edit'}
        error={visibleErrors.type}
      />

      <FieldNameInput
        label="Field name"
        value={properties.name}
        onChange={state.changeName}
        onBlur={() => state.blurField('name')}
        error={visibleErrors.name}
      />

      {isPIISupportedByFieldType(properties.type) && (
        <FieldPiiToggle
          label="Personal information (PII)"
          checked={properties.isPii}
          onChange={state.setIsPii}
        />
      )}
    </Box>
  );
};

export const BasicsSection = observer(_BasicsSection);