/**
 * @format
 */

import React, {FC} from 'react'
import {
  Button,
  Menu,
  MenuButton,
  MenuList,
  MenuOptionGroup,
  Box,
  Checkbox,
  Input,
  InputGroup,
  InputLeftElement
} from '@chakra-ui/react'
import {ChevronDown, ChevronUp} from 'react-feather'
import {FaSearch} from 'react-icons/fa'

type SelectDropDownProps = {
  optionList: Array<any>
  dropdownWidth: any
  selectedOptions: Array<any>
  searchInputValue: string
  selectAll: boolean
  setSearchInputValue(event: React.ChangeEvent<HTMLInputElement>): void
  handleSelectAll(event: any): void
  onChange(event: React.ChangeEvent<HTMLInputElement>): void
}

export const CheckBoxDrowpdown: FC<SelectDropDownProps> = ({
  optionList,
  dropdownWidth,
  selectedOptions,
  handleSelectAll,
  onChange,
  searchInputValue,
  setSearchInputValue,
  selectAll
}) => (
  <Box>
    <Menu>
      {({isOpen}) => (
        <>
          <MenuButton
            isActive={isOpen}
            as={Button}
            rightIcon={isOpen ? <ChevronUp opacity={0.2} /> : <ChevronDown opacity={0.2} />}
            width={'100%'}
            fontWeight={'normal'}
            variant={'menu'}>
            <Box maxW={'100%'} display={'block'} whiteSpace={'nowrap'} textOverflow={'ellipsis'} overflow={'hidden'}>
              {selectedOptions.length === optionList.length || selectedOptions.length === 0
                ? 'All'
                : selectedOptions.map((item, index) =>
                  index + 1 === selectedOptions.length ? `${item.name}` : `${item.name}, `
                )}
            </Box>
          </MenuButton>
          <MenuList width={dropdownWidth} padding={3}>
            <InputGroup>
              <InputLeftElement pointerEvents="none" children={<FaSearch color="gray.300" />} />
              <Input mb={3} value={searchInputValue} onChange={setSearchInputValue} placeholder={'Type to search...'} />
            </InputGroup>

            <MenuOptionGroup defaultValue="all" type="checkbox">
              {searchInputValue.length === 0 && (
                <Checkbox value="all" onChange={e => handleSelectAll(e.target.checked)} isChecked={selectAll}>
                  Select All
                </Checkbox>
              )}
              {optionList.map((option, index) => {
                const regex = new RegExp(searchInputValue, 'gi')
                let string

                if (searchInputValue) {
                  string = option.name.replace(
                    regex,
                    (match: any) => `<span style="color: red">${match}</span>`
                  )
                } else {
                  string = `<span>${option.name}</span>`
                }

                return (
                  <Box key={index}>
                    <Checkbox
                      value={option.value}
                      onChange={e => onChange(e)}
                      isChecked={!!selectedOptions.find(item => item.value === option.value)}>
                      <span dangerouslySetInnerHTML={{__html: string}} />
                    </Checkbox>
                  </Box>
                )
              })}
            </MenuOptionGroup>
          </MenuList>
        </>
      )}
    </Menu>
  </Box>
)