'use client'

import React, { useRef, useState } from 'react'
import Select from 'react-select'

export default function ReactSelect(){
    const selectOption = [
        { label: '김창수김창수김창수김창수김창수김창수김창수김창수김창수', value: '1' },
        { label: '敬称選択', value: '2' },
        { label: '敬称選択', value: '3' },
        { label: '敬称選択', value: '5' },
        { label: '敬称選択', value: '6' },
        { label: '敬称選択', value: '7' },
        { label: '敬称選択', value: '8' },
        { label: '敬称選択', value: '9' },
        { label: '敬称選択', value: '10' },
        { label: '敬称選択', value: '11' },

    ]
    
    const ref = useRef()
    
    const [select, setSelect] = useState('')
    
      //isSearchable 자동완성 검색가능여부
      //isClearable x버튼
    
    const onSelectionChange = (key) => {
        if (key) {
        setSelect(key.value)
        } else {
        setSelect('')
        }
    }
    

const CustomOption = (props) => {
    const { data, innerRef, innerProps, isSelected, isFocused, isDisabled } = props;
    const customClass = data.value === '6' ? 'special-option' : '';
    
    // 기본 선택/호버 상태 적용
    const optionClass = `${customClass} ${isSelected ? 'custom__option--is-selected' : ''} 
                        ${isFocused ? 'custom__option--is-focused' : ''} 
                        ${isDisabled ? 'custom__option--is-disabled' : ''}`;

    return (
        <div
            ref={innerRef}
            {...innerProps}
            className={`custom__option ${optionClass}`}
        >
            {data.label}
        </div>
    );
};   


    return(
        <Select 
            ref={ref} 
            instanceId="react-select-unique-id" 
            className='react-select-custom' 
            classNamePrefix='custom'
            options={selectOption} 
            onChange={onSelectionChange} 
            isSearchable={false} 
            placeholder="敬称選択" 
            isClearable={true} 
            menuPlacement={'auto'}
            components={{Option: CustomOption}}
            
        />
    )
}