import React, { useState } from "react";
import ReactSelect, { components } from "react-select";

function CustomReactSelect(props: { value: any; optionValue: any; handleChange: any, label: string, name: string, defaultValue?: string, placeholder?: string }) {
    const [selectedOption, setSelectedOption] = useState(null);
    const handleOptionChange = (selectedOption: any, event: any) => {
        setSelectedOption(selectedOption);
        props.handleChange(selectedOption, event);
     
    };
console.log(selectedOption,"@@")
    return (
        <>
            <label>{props.label}</label>
            <ReactSelect
                options={props.optionValue}
                value={selectedOption} // Use selectedOption from state here
                classNamePrefix="form-control"
                placeholder={props.placeholder}
                name={props.name}
                defaultValue={props.defaultValue}
                onChange={handleOptionChange} // Pass handleOptionChange to onChange
            />
        </>
    );
}

export default CustomReactSelect;








// <div>
// {isAttributeSuccess &&
//   attributesData?.attributes?.map((test: any, index: number) => (
//     <React.Fragment key={index}>
//       {test.type === "input" ? (
//         <InputField
//           key={index}
//           label={test.label}
//           name={test.label}
//           value={values.attributes?.[test.label] || ""} // Use formik values for input value
//           handleChange={(e: any) => {
//             setFieldValue(
//               `attributes.${test.label}`,
//               e.target.value
//             );
//           }}
//           placeholder={`Enter ${test.label}`}
//         />
//       ) : (
//         <CustomReactSelect
//         key={index}
//         label={test?.label}
//         placeholder={`Please Select ${test.label}`}
//         name={test.label}
//         optionValue={test?.options}
//         defaultValue={test?.options?.find((option: any) => option?.selected === 1)}
//         handleChange={(selectedOption: any, event: any) => {
//             console.log(selectedOption, event);
//             // Perform any other actions with selectedOption or event
//         }}
//         value={values.attributes?.[test.label]}
//     />
//       )}
//     </React.Fragment>
//   ))}
// </div>










//data will get in attributes which have 3 types
// 1. input 
// 2. select 
// 3. input with select 


// in oder to solve this i need to design 3 dynamic components

// to render this 
// check 

// if attributes type == input render input 
// else if attributes type == select render select