import { RtFormFieldCombobox } from '@dpa/react-form-field-combobox';
import { RtFrame } from '@dpa/react-frame-intro';
import { useEffect, useRef, useState } from 'react';

export function ComboboxPage() {
  const [value, setValue] = useState('hey');
  const comboboxRef = useRef();

  function onChange(e) {
    setValue(e.target.value);
  }

  return (
    <RtFrame
      as="div"
      surface="foundation-pure"
      use="ashy"
      style={{ height: '100vh' }}
    >
      <div style={{ padding: '20px', width: '300px', marginLeft: '100px' }}>
        <RtFormFieldCombobox
          use="error"
          value={value}
          ref={comboboxRef}
          readonly={false}
          formFieldProps={{ onChange }}
        >
          <span>Hello</span>
        </RtFormFieldCombobox>
      </div>

      <div
        dir="rtl"
        style={{ padding: '20px', width: '300px', marginLeft: '100px' }}
      >
        <RtFormFieldCombobox use="success" value={value}>
          <span>Hello</span>
        </RtFormFieldCombobox>
      </div>
    </RtFrame>
  );
}