// @flow
import React, { memo } from "react";
import Downshift from "downshift";
import styled from "@emotion/styled";
import { css } from "@emotion/core";
import theme from "../../../theme";

type ListItemsprops = {
  label: string,
  value: any,
  props: any
}
type Props = {
  bg: string,
  listItems: Array<ListItemsprops>,
  icon?: Node,
  clsNameButton: string,
  clsNameMenu: string,
  clsNameMenuItem: string,
  onChange: function
};

export const DropdownMenu = ({
  icon,
  listItems,
  bg = "rgba(255,255,255,0)",
  clsNameButton = "",
  clsNameMenu = "",
  clsNameMenuItem = "",
  onChange = fn => fn
}: Props) => {
  return (
    <Downshift
      onChange={onChange}
      itemToString={item => (item ? item.value : '')}
    >
      {({
        getItemProps,
        getMenuProps,
        isOpen,
        highlightedIndex,
        selectedItem,
        getToggleButtonProps,
        getRootProps
      }) => {
        return (
          <Box {...getRootProps()}>
            <MenuToggle bg={bg} {...getToggleButtonProps()} className={clsNameButton}>
              {icon ? icon : (<><i /><i /><i /></>)}
            </MenuToggle>
            {isOpen
              ? (
                <Menu {...getMenuProps()} className={clsNameMenu}>
                  {
                    listItems
                      .map((item, index) => (
                        <MenuItem
                          {...getItemProps({
                            key: item.label,
                            index,
                            item,
                            style: {
                              color: highlightedIndex === index ? theme.colors.links : 'inherit',
                              fontWeight: selectedItem === item ? '500' : '400',
                            },
                          })}
                          className={clsNameMenuItem}
                          {...item.props}
                        >
                          {item.value}
                        </MenuItem>
                      ))
                  }
                </Menu>
              ) : null}
          </Box>
        )
      }}
    </Downshift>
  );
};

const Box = styled.div`
  position: relative;
  width: 1em;
  height: 1em;
  z-index: 2;
`;
const MenuToggle = styled.div`
  width: 3rem;
  height: 3rem;
  border-radius: 3rem;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: ${({ bg }) => bg};

  i {
    display: block;
    width: .4rem;
    height: .4rem;
    border-radius: .3rem;
    margin: 0.2rem auto;
    background: ${theme.colors.primary};
    opacity: 0.5;
  }

  &:hover i {
    opacity: 0.75;
  }
`;
const Menu = styled.ul`
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
  padding: 1.2rem 0;
  margin: 1rem 0 0;
  min-width: 20rem;
  list-style: none;
`;
const MenuItem = styled.li`
  padding: .6rem 2.4rem;
  color: inherit;

  &:hover {
    color: ${theme.colors.links}
  }
`;

export default memo(DropdownMenu);