import { React, PropTypes, styled, useRef, useEffect, css } from 'vendor';
import { Dropdown } from 'react-bootstrap';
import { TruncatedText } from './text';
import { colors } from 'theme';

const StyledDropdown = styled(Dropdown)`
  display: inline-flex;
  .dropdown-item {
    white-space: break-spaces;
  }
`;

const StyledToggle = styled(Dropdown.Toggle)`
  &&& {
    border: 1px solid ${colors.forms.borders.light};
    color: ${colors.neutral.darker};
    background: #fff;
    height: 3.4rem;
    width: 25rem;
    text-align: left;
    padding: 0 1rem;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    appearance: none;
    border-radius: 0.4rem;

    &:focus {
      border-color: ${colors.forms.borders.focus};
      box-shadow: 0 0 4px 0 ${colors.forms.borders.focusShadow};
    }

    &:after {
      color: ${colors.neutral.std};
      flex-basis: 0;
      font-size: 24px;
    }

    ${props => props.hasError && css`
      border-color: #E298A0;
      background-color: #f8e8ea;
    `}
  }
`;

const StyledMenu = styled(Dropdown.Menu)`
  && {
    width: 100%;
    border-radius: 0.4rem;

    .dropdown-item {
      padding: 0.8rem 1rem;
      font-size: 1.4rem;
      color: ${colors.neutral.darker};
    }
  }
`;

const TutorDropdown = ({
  toggleName,
  dropdownItems,
  dropdownTestId = '',
  toggleDataTestId = '',
  disabled = false,
  shouldBeFocus = false,
  hasError = false }) => {
  const dropdownRef = useRef();
  useEffect(() => {
    if(dropdownRef && dropdownRef.current) {
      dropdownRef.current.focus();
    }
  }, []);
  return (
    <StyledDropdown data-test-id={dropdownTestId}>
      {
        toggleName &&
          <StyledToggle
            type="button"
            variant="outline"
            data-test-id={toggleDataTestId}
            disabled={disabled}
            ref={shouldBeFocus ? dropdownRef : null}
            hasError={hasError}>
            <TruncatedText maxWidth="25rem">{toggleName}</TruncatedText>
          </StyledToggle>
      }
      <StyledMenu>
        {dropdownItems}
      </StyledMenu>
    </StyledDropdown>
  );
};
TutorDropdown.propTypes = {
  toggleName: PropTypes.string,
  dropdownTestId: PropTypes.string,
  toggleDataTestId: PropTypes.string,
  disabled: PropTypes.bool,
  dropdownItems: PropTypes.node.isRequired,
  shouldBeFocus: PropTypes.bool,
  hasError: PropTypes.bool,
};

export default TutorDropdown;

@@ -50,16 +50,20 @@
 ect, css
+, cn
  %7D from 
@@ -72,16 +72,16 @@
 endor';%0A
-
 import %7B
@@ -965,41 +965,21 @@
     
-$%7Bprops =%3E props
+&
 .has
-E
+-e
 rror 
-&& css%60
+%7B
 %0A   
@@ -1041,17 +1041,16 @@
 ea;%0A    
-%60
 %7D%0A  %7D%0A%60;
@@ -1768,16 +1768,70 @@
 utline%22%0A
+            className=%7Bcn(%7B 'has-error': hasError %7D)%7D%0A
         
@@ -1898,16 +1898,16 @@
 sabled%7D%0A
+
         
@@ -1954,40 +1954,8 @@
 ull%7D
-%0A            hasError=%7BhasError%7D
 %3E%0A  

use className instead of props to render conditional in styled-components