import React from "react";
import PropTypes from "prop-types";
import styles from "./Select.module.css";
import componentCategories from "../../docs-utils/componentCategories";
import componentGroups from "../../docs-utils/componentGroups";

export default function Select(props) {
    let { size,
        style,
        variant,
        fieldStyle,
        disabled,
        optionvalues,
        placeholder } = props;

    return (
        <div className={styles.container}>
            <div className={styles.field + ' ' + styles[fieldStyle]
                + ' ' + styles[variant] + ' ' + `${disabled ? styles.disabled : null}`
                + ' ' + styles[size]} data-placeholder={placeholder}></div>
            <span className={styles.arrow + ' ' + `${size === 'lg' ? styles.arrowlg : null}`}>&#9698;</span>
            <ul className={styles.optionContainer}>
                {optionvalues && optionvalues.map(optionvalue => {
                    return (
                        <li className={styles.option} key={optionvalue}>
                            {optionvalue}
                        </li>
                    );
                })}
            </ul>
        </div >
    );
}

Select.defaultProps = {
    size: "md",
    variant: "",
    placeholder: "placeholder",
    fieldStyle: "",
};

if (__DOCS__) {
    Select.docs = {
        componentGroup: componentGroups.Atom,
        folderName: componentCategories.Form
    };
}
