import React, { useRef, useEffect, useContext } from 'react';
import { useField } from '@unform/core';
import AppContext from '../../AppProvider/AppContext';
import { InputPure } from '../../Input/web';
import { IPropsPureSelect, IPropsSelect } from '../select.interface';
import Style from './Select.style';

export const SelectPure: React.FunctionComponent<IPropsPureSelect> = ({
   inputRef,
   title,
   defaultValue,
   error,
   children,
   items,
   ...rest
}: IPropsSelect) => {
   return (
      <>
         <div className="input-title">{title}</div>
         <select ref={inputRef} defaultValue={defaultValue} {...rest} className={error && 'has-error'}>
            {!items && children}
            {items &&
               items.map((i) => (
                  <option value={i.id} key={i.id}>
                     {i.name}
                  </option>
               ))}
         </select>

         {error && <div className="error-input">{error}</div>}
      </>
   );
};
