import React, { PureComponent } from 'react';
import { string, func } from 'prop-types';
import styled from 'styled-components';
import { Field } from 'redux-form';
import { REM_UNIT_MD } from '@vincent_za/styles';
import { TextField } from '../../../../form';

const FieldWrap = styled.div`
  margin-bottom: ${REM_UNIT_MD};
`;

const TextFieldStyled = styled(TextField)`
  box-shadow: 0 1px 0 rgba(100, 104, 117, 0.4);
`;

class DropdownSearch extends PureComponent {
  render() {
    const { fieldName, onChange } = this.props;

    return (
      <FieldWrap>
        <Field
          name={fieldName}
          placeholder="Search"
          component={TextFieldStyled}
          id={fieldName}
          onChange={onChange}
        />
      </FieldWrap>
    );
  }
}

DropdownSearch.propTypes = {
  fieldName: string.isRequired,
  onChange: func,
};

DropdownSearch.defaultProps = {
  onChange() {},
};

export default DropdownSearch;
