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

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

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

  return (
    <>
      <section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''}`} >
        <section
          className={classes.text}
          onClick={() => toggleDropdown()}
        >
          <span className={classes.content}>{props.text}</span>
          <span className={classes.icon}></span>
        </section>
        <ul className={classes.menu} style={props.activeColor}>
          {
            props.menu.map((item) => {
              return (
                <li
                  key={item.name}
                  className={`${classes.item} ${item.name === props.text || (props.activeRule && props.activeRule(item)) ? classes.active : ''}`}
                  onClick={() => {
                    props.onClick(item)
                    toggleDropdown()
                  }}
                >
                  <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,
};