import  React, { useRef, useEffect } from  "react";

import  ReactSelect  from  "react-select";

import { useField } from  "@unform/core";

type  Option = {

  value: string;
  
  label: string;

};

const  options: Option[] = [

	{ value: "chocolate", label: "Chocolate" },

	{ value: "strawberry", label: "Strawberry" },

	{ value: "vanilla", label: "Vanilla" },

];

export  default  function  Select({ name, ...rest }: any) {

const  selectRef = useRef(null);

const { fieldName, defaultValue, registerField, error } = useField(name);

useEffect(() => {

	registerField({

		name: fieldName,

		ref: selectRef.current,

		getValue: (ref: any) => {

			if (rest.isMulti) {

				if (!ref.state.ariaSelection.value) {

					return [];

				}

				return  ref.state.ariaSelection.value.map(
					(option: Option) =>  option.value);
			}

				if (!ref.state.ariaSelection.value) {

					return  "";

				}

				return  ref.state.ariaSelection.value;

				},

	});

}, [fieldName, registerField, rest.isMulti]);

  

return (

	<ReactSelect

	defaultValue={defaultValue}

	ref={selectRef}

	options={options}

	classNamePrefix="react-select"

	{...rest} />

	);

}