import cx from 'classnames';
import React from 'react';
import Select, { components as originalComponents } from 'react-select';
import Checkbox from '../Checkbox/index.jsx';
import style from './StyledSelect.module.scss';
import { useTheme } from 'emotion-theming';

const Option = ({ innerRef, innerProps, isSelected, label }) => {
  return (
    <div ref={innerRef} className={cx(style.option, isSelected && style.value)} {...innerProps}>
      <Checkbox className={style.checkboxWrapper} checked={isSelected} readOnly>
        {label}
      </Checkbox>
    </div>
  );
};

const SingleValue = ({ children, ...props }) => {
  return (
    <originalComponents.SingleValue {...props}>
      {props.data.selectedLabel || children}
    </originalComponents.SingleValue>
  );
};

const MultiValue = ({ children, ...props }) => {
  return (
    <originalComponents.MultiValue {...props}>
      {props.data.selectedLabel || children}
    </originalComponents.MultiValue>
  );
};

const StyledSelect = ({
  closeMenuOnSelect = true,
  label,
  containerStyles,
  disabled,
  error,
  ...rest
}) => {
  const theme = useTheme();
  return (
    <Select
      isDisabled={disabled}
      styles={{
        container: (provided) => ({
          ...provided,
          border: 'none',
          borderRadius: '6px',
          minHeight: '40px',
          minWidth: '150px',
          ...containerStyles,
        }),
        control: (provided, state) => ({
          ...provided,
          minHeight: '40px',
          cursor: 'pointer',
          border: error
            ? `${theme.colors.borderError} 1px solid`
            : state.isFocused
            ? `${theme.colors.borderActive} 1px solid`
            : '1px solid #d7dbe2',
          '&:hover': {
            border: state.isFocused
              ? `${theme.colors.borderActive} 1px solid`
              : '1px solid #9ba1ae',
          },
        }),
        multiValueContainer: (provided) => ({
          ...provided,
          minHeight: '40px',
        }),
        multiValue: (provided) => ({
          ...provided,
          backgroundColor: '#F4F5F7',
          borderRadius: '6px',
        }),
        indicatorSeparator: (provided) => ({
          ...provided,
          display: 'none',
        }),
        dropdownIndicator: (provided, state) => ({
          ...provided,
          transform: state.selectProps.menuIsOpen && 'rotate(180deg)',
          color: state.isFocused ? theme.colors.borderActive : '#3C4757',
        }),
        input: (provided) => ({
          ...provided,
          height: '30px !important',
          padding: '0px',
          margin: '0px',
          color: error ? theme.colors.error : theme.colors.input,
          input: {
            fontSize: '14px !important',
            height: '30px',
          },
        }),
        noOptionsMessage: (provided) => ({
          ...provided,
          color: error ? theme.colors.error : theme.colors.placeholder,
          textAlign: 'left',
          fontSize: '14px',
        }),
        menuList: (provided) => ({
          ...provided,
          margin: '14px',
          padding: '0px',
        }),
        multiValueRemove: (provided) => ({
          ...provided,
          backgroundColor: '#F4F5F7',
          color: '#9ba1ae',
          cursor: 'pointer',
          '&:hover': {
            backgroundColor: '#F4F5F7',
            color: '#9ba1ae',
          },
        }),
        placeholder: (provided, state) => ({
          ...provided,
          fontSize: '14px',
          display: state.isFocused ? 'none' : 'block',
          color: '#9ba1ae',
        }),
      }}
      backspaceRemovesValue
      closeMenuOnSelect={closeMenuOnSelect}
      hideSelectedOptions={false}
      placeholder={`Select ${label}`}
      noOptionsMessage={() => `No ${label} found`}
      delimiter=""
      components={{ Option, SingleValue, MultiValue }}
      maxMenuHeight={200}
      isClearable={false}
      {...rest}
    />
  );
};

export default StyledSelect;