import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { IoIosArrowDown } from 'react-icons/io';
import styleIdentifiers from './GenericDropDown.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type GenericDropDownProps = StateProps & DispatchProps & OwnProps;

const GenericDropDown = (props: GenericDropDownProps) => {
  const {
    defaultOpen,
    title,
    titleClassName,
    className,
    children,
    childClassName,
    active,
    toggle,
    noArrow,
    onToggle,
  } = props;

  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const [drop, setDrop] = useState(!!defaultOpen);

  useEffect(() => {
    setDrop(!!defaultOpen);
  }, [defaultOpen]);

  function handleToggle() {
    if (toggle) toggle();
    else setDrop(!drop);

    if (onToggle) onToggle(!drop);
  }

  return (
    <div className={styles('generic-drop-down', className)}>
      <div className={styles('head', titleClassName)} onClick={handleToggle}>
        <div className={styles('left')}>
          <TextItem item={title} />
        </div>
        {!noArrow && <IoIosArrowDown className={styles('arrow', drop && 'active')} />}
      </div>
      <div className={styles('content', childClassName, active || drop ? 'active' : 'not-active')}>
        {children}
      </div>
    </div>
  );
};

export default GenericDropDown;
