import { forwardRef } from 'react'
import { mauve, mauveDark, purple, purpleDark } from '@radix-ui/colors'
import { useTheme } from 'next-themes'
import { styled } from '../stitches.config'
import dynamic from 'next/dynamic'
import type { Props } from 'react-select'
const SelectInput = dynamic(() => import('react-select'), { ssr: false })

// eslint-disable-next-line react/display-name
const Select = forwardRef<any, Props>((props, ref) => {
  const { theme } = useTheme()
  const isDark = theme === 'dark'
  const colors: any = {
    // primary: pink.pink9,
    active: isDark ? purpleDark.purple9 : purple.purple9,
    activeLight: isDark ? purpleDark.purple5 : purple.purple5,
    primary: isDark ? mauveDark.mauve4 : mauve.mauve4,
    secondary: isDark ? mauveDark.mauve8 : mauve.mauve8,
    background: isDark ? mauveDark.mauve4 : mauve.mauve4,
    searchText: isDark ? mauveDark.mauve12 : mauve.mauve12,
    bg: isDark ? mauveDark.mauve1 : mauve.mauve1,
    dropDownBg: isDark ? mauveDark.mauve5 : mauve.mauve2,
    mauve4: isDark ? mauveDark.mauve4 : mauve.mauve4,
    mauve5: isDark ? mauveDark.mauve5 : mauve.mauve5,
    mauve8: isDark ? mauveDark.mauve8 : mauve.mauve8,
    mauve9: isDark ? mauveDark.mauve9 : mauve.mauve9,
    mauve12: isDark ? mauveDark.mauve12 : mauve.mauve12,
    border: isDark ? mauveDark.mauve10 : mauve.mauve10,
    placeholder: isDark ? mauveDark.mauve11 : mauve.mauve11
  }
  colors.outline = colors.background
  colors.selected = colors.secondary
  return (
    <SelectInput
      ref={ref}
      menuPosition={props.menuPosition || 'fixed'}
      styles={{
        container: provided => {
          return {
            ...provided,
            position: 'relative'
          }
        },
        singleValue: provided => ({
          ...provided,
          color: colors.mauve12
        }),
        menu: provided => ({
          ...provided,
          backgroundColor: colors.dropDownBg
        }),
        control: (provided, state) => {
          return {
            ...provided,
            minHeight: 0,
            border: '0px',
            backgroundColor: colors.mauve4,
            boxShadow: `0 0 0 1px ${state.isFocused ? colors.border : colors.secondary}`
          }
        },
        input: provided => {
          return {
            ...provided,
            color: '$text'
          }
        },
        multiValue: provided => {
          return {
            ...provided,
            backgroundColor: colors.mauve8
          }
        },
        multiValueLabel: provided => {
          return {
            ...provided,
            color: colors.mauve12
          }
        },
        multiValueRemove: provided => {
          return {
            ...provided,
            ':hover': {
              background: colors.mauve9
            }
          }
        },
        option: (provided, state) => {
          return {
            ...provided,
            color: colors.searchText,
            backgroundColor: state.isFocused ? colors.activeLight : colors.dropDownBg,
            ':hover': {
              backgroundColor: colors.active,
              color: '#ffffff'
            },
            ':selected': {
              backgroundColor: 'red'
            }
          }
        },
        indicatorSeparator: provided => {
          return {
            ...provided,
            backgroundColor: colors.secondary
          }
        },
        dropdownIndicator: (provided, state) => {
          return {
            ...provided,
            color: state.isFocused ? colors.border : colors.secondary,
            ':hover': {
              color: colors.border
            }
          }
        }
      }}
      {...props}
    />
  )
})

export default styled(Select, {})
