import { IDropdown, IDropdownItem } from './Dropdown.interface'
import React, { createRef, useState } from 'react'
import {
  StyledDropdown,
  StyledDropdownContainer,
  StyledDropdownItem,
  StyledDropdownTitle
} from './Dropdown.theme'

import clickOutSideToClose from '../../../helpers/clickOutsideToClose'
const Dropdown = ({ children, title, icon, theme, style, className }: IDropdown) => {
  const [isOpen, setIsOpen] = useState(false)
  const itemsContainerRef = createRef<HTMLDivElement>()
  clickOutSideToClose(itemsContainerRef, () => setIsOpen(false))

  return (
    <StyledDropdown ref={itemsContainerRef}>
      <StyledDropdownTitle
        open={isOpen}
        onClick={() => setIsOpen(!isOpen)}
        theme={theme}
        title={'Choose Title'}
        className={className}
        style={style}
      >
        {title}
        {icon && <span className="icon">{icon} </span>}
      </StyledDropdownTitle>
      <StyledDropdownContainer open={isOpen}
        theme={theme}
      >
        {children}
      </StyledDropdownContainer>
    </StyledDropdown>
  )
}

export default Dropdown

export const DropdownItem = ({
  icon,
  disabled,
  section,
  children,
  onClick,
  className,
  style
}: IDropdownItem) => {
  const itemClickHandler = () => {
    if (onClick && !disabled) onClick()
  }

  return (
    <StyledDropdownItem
      disabled={disabled}
      section={section}
      onClick={itemClickHandler}
      className={className}
      style={style}
    >
      {children}
      {icon && <span>{icon}</span>}
    </StyledDropdownItem>
  )
}