import { Colors, Sizes } from '../../styles';
import * as React from 'react';
import {
    StyledOption,
    StyledSelect,
    StyledLabel,
    StyledContainer,
} from './styled-select';

interface Props {
    name: string;
    items: any[];
    label: string;
    size: Sizes;
    color: Colors;
    fullWidth?: boolean;
    value?: string | string[];
    idKey: string;
    titleKey: string;
    onChange?: (e: {target: { value: string }}) => void;
}

const Select = (props: Props) => {
    // const getSelected = (item: any) => {
    //     if(props.idKey && typeof props.value === 'string'){
    //         return item[props.idKey] === props.value;
    //     } else if(props.idKey){
    //         return props.value?.includes(item[props.idKey]);
    //     }
    //     return item.name === props.value;
    // };

    return(
        <StyledContainer fullWidth={props.fullWidth}>
            <StyledLabel htmlFor={props.name}>
                {props.label}
            </StyledLabel>
            <StyledSelect
                color={props.color}
                name={props.name}
                selectSize={props.size}
                onChange={props.onChange}
            >
                {props.items.map(item => (
                    <StyledOption
                        key={item[props.idKey]}
                        value={item[props.idKey]}
                    >
                        {item[props.titleKey]}
                    </StyledOption>
                ))}
            </StyledSelect>
        </StyledContainer>
    );
};

Select.defaultProps = {
    color: 'primary',
    titleKey: 'name',
    idKey: 'id',
    size: 'md',
};

export default Select;