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 styleIdentifiers from './dropDownMenu.scss';

// assets
import profilePicture from './assets/pp.png';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type DropDownMenuProps = StateProps & DispatchProps & OwnProps;

const DropDownMenu = (props: DropDownMenuProps) => {
  const { children } = props;
  const [toggleActive, setToggleActive] = useState();
  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  return (
    <div className={styles('drop-down-menu')}>
      <div
        className={styles('profile-picture', toggleActive === 1 && 'active')}
        onClick={() => setToggleActive(toggleActive === 1 ? null : 1)}
      >
        <img src={profilePicture} alt="profile" />
      </div>
      <div className={styles('menu', toggleActive === 1 && 'active')}>{children}</div>
    </div>
  );
};

export default DropDownMenu;
