import * as React from "react"
import * as ReactDOM from "react-dom"
import * as Types from "../../types"
import {BaseElement} from "../BaseElement"
import mergeClassNames from "classnames"
import {Option} from "./Option"
import {OptionGroup} from "./OptionGroup"


export interface SelectProps extends Types.BluelibHTMLProps<HTMLSelectElement> {
    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
    onSimpleChange?: (value: string) => void,
    value?: string,
}


export function Select({onChange, onSimpleChange, ...props}: SelectProps): JSX.Element {
    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-select")

    const onChangeWrapped = React.useCallback(
        event => {
            if(onChange) onChange(event)
            if(onSimpleChange) onSimpleChange(event.target.value)
        },
        [onChange, onSimpleChange]
    )

    return (
        <BaseElement kind={"select"} multiple={false} required={true} onChange={onChangeWrapped} {...props}/>
    )
}


Select.Option = Option
Select.Group = OptionGroup