import React, { forwardRef, FC, Ref } from 'react';
import ReactSelect from 'react-select';
import css from './index.module.css';

export interface SelectProps {
  label: string;
  required?: boolean;
  value?: {
    value?: string;
    label?: string;
  };
}

const customStyles = {
  valueContainer: (provided): unknown => ({
    ...provided,
    padding: '0 4px',
  }),
  placeholder: (provided): unknown => {
    return {
      ...provided,
      textTransform: 'none',
      ':hover': {
        color: '#333',
      },
    };
  },
  control: (provided): unknown => {
    return {
      ...provided,
      border: 'solid 1px #333',
      borderRadius: '25px',
      padding: '1px 8px',
      fontSize: '14px',
      minWidth: 225,
      fontFamily: 'Avenir Next", Lato, sans-serif;',
      boxShadow: 'none',
      maxHeight: 222,
      textTransform: 'none',
      '&:hover': {
        boxShadow: 'none',
        borderColor: '#333',
      },
      '&:hover::placeholder': {
        color: 'hotpink',
      },
    };
  },
  menu: (provided): unknown => {
    return {
      ...provided,
      overflow: 'hidden',
      border: '1px solid rgb(20, 32, 70)',
      borderRadius: '25px',
      padding: '0',
      marginTop: '0px',
      textTransform: 'none',
      maxHeight: 222,
      '&::after': {
        content: "''",
        position: 'absolute',
        bottom: 0,
        height: '20px',
        width: '100%',
        background:
          'linear-gradient(to top, rgba(20, 32, 70, 0.25) 0%, rgba(20, 32, 70, 0) 100%)',
      },
    };
  },
  menuList: (provided): unknown => {
    return {
      ...provided,
      padding: '10px 0px',
    };
  },
  option: (provided, state): unknown => ({
    ...provided,
    padding: '6px 18px',
    fontSize: '16px',
    backgroundColor: state.isFocused ? '#f3f3f3' : '#fff',
    borderTop: state.isFocused ? '1px solid #f3f3f3' : 'solid 1px #fff',
    borderBottom: state.isFocused ? '1px solid #f3f3f3' : 'solid 1px #fff',
    ':hover': {
      backgroundColor: 'rgb(244, 244, 244)',
      color: 'rgb(20, 32, 70)',
    },
    color: 'rgb(20, 32, 70)',
    textTransform: 'none',
  }),
  singleValue: (_, state): unknown => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';
    return {
      fontSize: '14px',
      opacity,
      padding: '0 4px',
      transition,
      background: '#fff',
      textTransform: 'none',
      color: 'rgb(20, 32, 70)',
      ':hover': {
        color: 'rgb(20, 32, 70)',
      },
    };
  },
};

const ForwardRefSelect: FC<SelectProps> = forwardRef(function Select(
  { label, required, ...rest }: SelectProps,
  ref: Ref<unknown>,
) {
  return (
    <label className={css.select__label} data-testid="Select">
      {label && label}
      <div className={css.select__wrap}>
        <ReactSelect
          ref={ref}
          styles={customStyles}
          isSearchable={true}
          isClearable={true}
          deleteRemoves={true}
          {...rest}
        ></ReactSelect>

        {/* Fix required error for react-select */}
        {required && (
          <input
            className={css.select__error}
            tabIndex={-1}
            autoComplete="off"
            defaultValue={rest.value && rest.value.value}
            required={true}
          />
        )}
      </div>
    </label>
  );
});

export default ForwardRefSelect;