import * as classNames from 'classnames';
import * as React from 'react';
import Select from 'react-select';
// import '../../../../scss/form/v1/select/cmx-select.component.scss';
// import { Input as SelectInput } from 'react-select/lib/components/Input';
import { InputProps } from '../types/InputProps';

export interface Option {
  label: string;
  value: string;
}

export interface OwnProps {
  autoComplete?: string;
  defaultValue?: string;
  disabled?: boolean;
  testId?: string;
  multi?: boolean;
  multiFirst?: boolean;
  multiLast?: boolean;
  options?: Option[];
  placeholder?: any;
  required?: boolean;
  searchable?: boolean;
}

class Dropdown extends React.Component<OwnProps & InputProps, {}> {
  render() {
    const {
      // autoComplete,
      defaultValue,
      disabled,
      error,
      multi,
      multiFirst,
      multiLast,
      name,
      onBlur,
      onChange,
      onFocus,
      options,
      placeholder,
      searchable = true,
      testId,
      value,
    } = this.props;

    return (
      <div data-tid={testId}>
        <Select
          className={classNames(error && 'error', multi && multiFirst && 'multiFirst', multi && multiLast && 'multiLast')}
          isClearable={false}
          styles={{
            control: (styles, { isFocused }) => ({
              ...styles,
              cursor: 'pointer',
              backgroundColor: 'white',
              ...(isFocused
              ? {
                  border: '1px solid #3FA9F5',
                  boxShadow: 'none',
                }
              : {}),
            }),
            option: (styles, { data, isDisabled, isFocused, isSelected }) => ({
              ...styles,
              padding: '10px 16px',
              ...(isSelected
              ? {
                background: 'none',
                color: '#3FA9F5',
              }
                : {}),
            ...(isFocused
              ? {
                  backgroundColor: '#F4F6F9',
                }
              : {}),
              ':hover': {
                backgroundColor: '#F4F6F9',
              },
            }),
            indicatorSeparator: () => ({
              display: 'none',
            }),
            menuList: (styles) => ({
              ...styles,
              padding: 0,
              borderTop: '3px solid #3FA9F5',
              background: '#fff',
              borderRadius: '3px',
              boxShadow: '0 8px 13px rgba(0,0,0,0.3)',
              // ':hover': {
              //   background: 'none',
              // },
            }),
            dropdownIndicator: (styles, { isHover }) => ({
              ...styles,
              color: 'white',
              backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzNmYTlmNSIgZD0iTTIgOS4yNmwuNzEtLjcyLjcyLS43MSA0LjI4IDMuNTdMMTIgMTVsNC4yOS0zLjU3IDQuMjgtMy41Ny43Mi43MS43MS43Mi01IDQuMjgtNSA0LjI5LTUtNC4zMnoiLz48L3N2Zz4=")',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'calc(100% - 8px) center',
              backgroundSize: '16px 16px',
              width: '38px',
              height: '38px',
              '> svg': {
                display: 'none',
              },
            }),
            input: (styles) => ({
              ...styles,
            }),
            placeholder: (styles) => ({ ...styles }),
            singleValue: (styles, { data }) => ({
              ...styles,
              color: '#6e7d87',
            }),
          }}
          theme={{
            borderRadius: 3,
            colors: {
              primary: 'rgba(7,182,244)',
              primary75: 'rgba(7,182,244,.75)',
              primary50: 'rgba(7,182,244,.5)',
              primary25: 'rgba(7,182,244,.25)',
              danger: '#DE350B',
              dangerLight: '#FFBDAD',
              neutral0: 'hsl(0, 0%, 100%)',
              neutral5: 'hsl(0, 0%, 95%)',
              neutral10: 'hsl(0, 0%, 90%)',
              neutral20: 'hsl(0, 0%, 80%)',
              neutral30: 'hsl(0, 0%, 70%)',
              neutral40: 'hsl(0, 0%, 60%)',
              neutral50: 'hsl(0, 0%, 50%)',
              neutral60: 'hsl(0, 0%, 40%)',
              neutral70: 'hsl(0, 0%, 30%)',
              neutral80: 'hsl(0, 0%, 20%)',
              neutral90: 'hsl(0, 0%, 10%)',
            },
            spacing: {
              baseUnit: 4,
              controlHeight: 40,
              menuGutter: 0,
            },
          }}
          // inputProps={{ autoComplete }}
          name={name}
          onBlur={onBlur}
          onChange={onChange}
          onFocus={onFocus}
          options={options || []}
          placeholder={placeholder}
          isDisabled={disabled}
          value={defaultValue || value}
          isSearchable={searchable}
          // components={{
          //   Input: (props) => (<SelectInput {...props} autoComplete={autoComplete} />)
          // }}
        />
      </div>
    );
  }
}

export default Dropdown;