import { Select } from '@mantine/core';
import { useEffect, useState } from 'react';
import { useOptionsContext } from './Options.context';

export function OptionSelect({ data, path, ...rest }) {
  const { getOptions, updateOptions } = useOptionsContext();
  const [value, setValue] = useState('');

  const handleChange = value => {
    updateOptions(path, value);
    setValue(value);
  };

  useEffect(() => {
    const value = getOptions(path);
    setValue(value);
  }, []);

  return (
    <Select
      size="xs"
      data={data}
      value={value}
      onChange={handleChange}
      {...rest}
    />
  );
}