import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import { Field } from 'formik';
import { TextField } from 'formik-material-ui';
import { getMetaValue } from '../../utils/utils';

export default ({ propertyData, propertyId }) => {
    const selectLabels = getMetaValue(propertyData, 'selectLabels');
    return (
        <Field
            css={{ margin: 16 }}
            disabled={getMetaValue(propertyData, 'readonly')}
            variant={'outlined'}
            name={propertyId}
            select
            label={propertyId}
            component={TextField}>
            {[...propertyData['_whitelist']['list']].map((option) => (
                <MenuItem key={option} value={option}>
                    {selectLabels ? selectLabels[option] : option}
                </MenuItem>
            ))}
        </Field>
    );
};