import React from 'react';

import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import type { TreeItemKey, TreeProps } from '../../Tree/Tree';
import { Tree } from '../../Tree/Tree';

export interface TreeFieldProps<T extends object = object, V extends TreeItemKey = string>
  extends
    Omit<FormRowProps, 'children' | 'htmlFor' | 'isFullWidth' | 'label'>,
    Omit<TreeProps<T, V>, 'error' | 'warning'>,
    Partial<FormRowHelperTextOwnProps> {}

export const TreeField = function TreeField<T extends object, V extends TreeItemKey = string>({
  label,
  tooltip,
  required,
  justify,
  labelHidden,
  hint,
  error,
  warning,
  ...treeFieldProps
}: TreeFieldProps<T, V>) {
  return (
    <FormRow as='div' label={label} tooltip={tooltip} required={required} justify={justify} labelHidden={labelHidden}>
      <div className='v2FormField__input'>
        <Tree label={label} error={!!error} warning={!!warning} aria-label={label} {...treeFieldProps} />
        <FormRow.HelperText error={error} warning={warning} hint={hint} />
      </div>
    </FormRow>
  );
};