/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import * as React from 'react';

import { ButtonAtom, CardAtom, IconAtom, TextAtom } from '../../atoms';

// @ts-ignore
import COLORS from '../../constants/colors';

interface Iitem {
  label?: string;
  handleClick?: any;
  component?: any;
}

interface IProps {
  className?: any;
  'data-test'?: any;
  type?: string;
  children: any;
  label?: string;
  items?: Iitem[];
  css?: any;
}

class DropdownLightMolecule extends React.PureComponent<IProps, any> {
  public state = {
    isExpanded: false
  };
  public dropdownMenuWrapper: any;

  public componentWillMount() {
    document.addEventListener('mousedown', this.handlePageClick);
  }

  public componentWillUnmount() {
    document.removeEventListener('mousedown', this.handlePageClick);
  }

  public handlePageClick = (e: any) => {
    if (this.dropdownMenuWrapper) {
      if (this.dropdownMenuWrapper.contains(e.target)) {
        this.setState({ isExpanded: !this.state.isExpanded });
        return;
      }
      this.setState({ isExpanded: false });
    }
  };

  public render() {
    const { isExpanded } = this.state;
    const { items = [], label } = this.props;

    return (
      <div
        ref={(dropdownMenuWrapper) => {
          this.dropdownMenuWrapper = dropdownMenuWrapper;
        }}
        className="relative"
      >
        <ButtonAtom
          onClick={() => {}}
          className={`${this.props.className} outline-0`}
          data-test={this.props['data-test']}
          css={this.props.css}
        >
          <TextAtom>{label}</TextAtom>
          <IconAtom
            name="chevron-down"
            css={css`
              color: #b8c2cc;
            `}
          />
        </ButtonAtom>
        <CardAtom
          className="absolute flex flex-column top-0 right-0"
          css={css`
            max-height: ${isExpanded ? 1000 : 0}px;
            opacity: ${isExpanded ? 1 : 0};
            top: ${isExpanded ? 60 : 60}px;
            overflow: hidden;
            transition: max-height 0.2s linear, opacity 0.2s linear,
              top 0.2s linear;
            z-index: 999;
            width: 100%;
          `}
        >
          {items.map((item: any, idx: any) => {
            if (item.component) {
              return (
                <div
                  key={idx}
                  id={`dropdownmenu-${idx}`}
                  role="button"
                  tabIndex={idx}
                  className="w-100 pointer pv3 ph3-ns ph2 outline-0"
                  css={css`
                    display: ${isExpanded ? 'flex' : 'flex'};
                    width: auto;
                    min-width: 150px;
                    transition: 0.2s;
                    :hover {
                      background: #f5f7fa;
                      transition: 0.2s;
                    }
                  `}
                  data-test={`${this.props['data-test']}-${idx}`}
                >
                  {item.component()}
                </div>
              );
            }

            return (
              <div
                key={idx}
                id={`dropdownmenu-${idx}`}
                role="button"
                tabIndex={idx}
                onKeyPress={item.handleClick}
                onClick={item.handleClick}
                className="w-100 pointer pv3 ph3-ns ph2 outline-0"
                css={css`
                  display: ${isExpanded ? 'flex' : 'flex'};
                  width: auto;
                  min-width: 150px;
                  transition: 0.2s;
                  border-bottom: solid 1px #d7dee5;
                  padding-left: 2rem;
                  :hover {
                    background: #f5f7fa;
                    transition: 0.2s;
                  }
                  :last-child {
                    border-bottom: solid 0px;
                  }
                `}
                data-test={`${this.props['data-test']}-${idx}`}
              >
                <TextAtom
                  size="S"
                  css={css`
                    white-space: pre;
                  `}
                >
                  {item.label}
                </TextAtom>
              </div>
            );
          })}
        </CardAtom>
      </div>
    );
  }
}

export { DropdownLightMolecule };