import Label from './Label';
import { Events } from '../../index';

export default function Select({
    label,
    name,
    required,
    className,
    value,
    options,
    Enum,
    ...props
}: Inputs.Select) {
    const selected: string = options.filter(
        (option) => option === Enum[value as number]
    )[0];

    const other: string[] = options.filter(
        (option) => option !== Enum[value as number]
    );

    return (
        <div>
            {label && (
                <Label
                    name={typeof label === 'string' ? label : label.text}
                    htmlFor={name}
                    className={
                        typeof label === 'string' ? undefined : label.className
                    }
                    required={required}
                />
            )}
            <select
                name={name}
                id={name}
                required={required}
                className={`darkAltContainer text ${className}`}
                {...props}>
                <option
                    value={
                        Enum ? Enum[selected as keyof typeof Enum] : selected
                    }>
                    {selected}
                </option>
                {other.map((option) => (
                    <option
                        key={`select-${Math.random().toFixed(4)}-${Events.Utils.slugify(option)}`}
                        value={
                            Enum ? Enum[option as keyof typeof Enum] : option
                        }>
                        {option}
                    </option>
                ))}
            </select>
        </div>
    );
}