import React, {
  useState,
  useCallback
} from 'react'
import PropTypes from 'prop-types';
import classes from './scss/dropdown.module.scss'

export default function Dropdown(props) {
  const [hidden, setHidden] = useState(true)

  const toggleDropdown = () => {
    setHidden(!hidden)
  }

  const onMouseEnter = useCallback((item) => {
    document.documentElement.style.setProperty('--cursor-color', item.color);
  }, [])

  const onMouseLeave = useCallback(() => {
    document.documentElement.style.setProperty('--cursor-color', 'var(--text-color)');
  }, [])

  return (
    <>
      <section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''} ${props.left ? classes.left : ''}`} data-type="clickable">
        <section
          className={classes.text}
          onClick={() => toggleDropdown()}
        >
          <span className={classes.content}>{props.text}</span>
          <span className={classes.icon} style={props.iconStyle}></span>
          <section
            className={classes.popup}
          >
            <span className={classes.text}>{props.altText}</span>
          </section>
        </section>
        <ul className={classes.menu} style={props.activeColor}>
          {
            props.menu.map((item) => {
              switch (item.type) {
                case 'date': {
                  return (
                    <section
                      key={item.name}
                      className={classes.date}
                    >
                      <section className={classes.line} />
                      <section className={classes.text}>{item.name}</section>
                    </section>
                  )
                }
                case 'custom': {
                  return (
                    item.component
                  )
                }
                default: {
                  return (
                    <li
                      key={item.name}
                      className={`${classes.item} ${item.name === props.text || (props.activeRule && props.activeRule(item)) ? classes.active : ''}`}
                      onClick={() => {
                        props.onClick(item)
                        toggleDropdown()
                      }}
                      style={item.color ? { color: item.color } : {}}
                      data-type="clickable"
                      onMouseEnter={() => onMouseEnter(item)}
                      onMouseLeave={() => onMouseLeave()}
                    >
                      {
                        item.icon ? (
                          <section className={classes.item_icon}>
                            {item.icon}
                          </section>
                        ) : null
                      }
                      <section className={classes.text}>{item.name}</section>
                    </li>
                  )
                }
              }
            })
          }
        </ul>
        <section
          className={classes.overlay}
          hidden={hidden}
          onClick={() => toggleDropdown()}
        />
      </section>
    </>
  )
}
Dropdown.propTypes = {
  className: PropTypes.string,
  text: PropTypes.string,
  menu: PropTypes.array,
  onClick: PropTypes.func,
  activeColor: PropTypes.object,
  activeRule: PropTypes.func,
  altText: PropTypes.string,
  iconStyle: PropTypes.object,
  left: PropTypes.bool,
};