import React from 'react';
import { bool, string, arrayOf } from 'prop-types';
import styled from 'styled-components';
import { media, REM_UNIT_MD, SONIC_SILVER, GRAY_X11 } from '@vincent_za/styles';
import { ellipsisSvg } from '@vincent_za/assets';
import Svg from '../../../Svg/component';

import { HeaderWrap, Item } from '../../shared';
import { CL_DROPDOWN_HEADER, CL_DROPDOWN_MENU_ITEM } from '../../constants';
import Base from '../../Base/component';

const OuterWrap = styled.div`
  display: flex;
  align-items: center;

  .menu {
    ${props => props.isWidget && 'margin-top: 0'};
    padding-top: ${REM_UNIT_MD};
  };
`;

const HeaderWrapStyled = styled(HeaderWrap)`
  padding: 0;

  ${media.sm`
    padding: 0;
  `};
`;

const Icon = styled(Svg)`
  display: flex;
  width: 1.4rem;
  height: 1.4rem;
  fill: ${props => props.isOpen ? GRAY_X11 : SONIC_SILVER};

  &:hover {
    fill: ${GRAY_X11};
  }
`;

const Divider = styled.div`
  margin: ${REM_UNIT_MD} 0;
  width: 50%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.07);
`;

class VariantBotEllipsis extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.activeLocationPath !== this.props.activeLocationPath) return true;
    if (nextProps.activeModalIds !== this.props.activeModalIds) return true;
    return false;
  }

  render() {
    const {
      isWidget,
      className,
    } = this.props;

    return (
      <OuterWrap isWidget={isWidget}>
        <Base
          isClick
          isCloseOnSelect
          isNoMaxHeight
          isTop={!isWidget}
          isRight={!isWidget}
          isInWidget={isWidget}
          className={className}
          renderHeader={({ isOpen, onClick }) => (
            <HeaderWrapStyled onClick={onClick} className={CL_DROPDOWN_HEADER}>
              <Icon isOpen={isOpen} svg={ellipsisSvg} />
            </HeaderWrapStyled>
          )}
          renderMenu={() => (
            <ul>
              <Item className={CL_DROPDOWN_MENU_ITEM} onClick={() => {}}>
                Option 1
              </Item>
              <Divider />
              <Item className={CL_DROPDOWN_MENU_ITEM} onClick={() => {}}>
                Option 2
              </Item>
              <Item className={CL_DROPDOWN_MENU_ITEM} onClick={() => {}}>
                Option 3
              </Item>
            </ul>
          )}
        />
      </OuterWrap>
    );
  }
}

VariantBotEllipsis.propTypes = {
  isWidget: bool,
  activeLocationPath: string,
  activeModalIds: arrayOf(string).isRequired,
  className: string,
};

VariantBotEllipsis.defaultProps = {
  isWidget: false,
  activeLocationPath: undefined,
  className: undefined,
};

export default VariantBotEllipsis;
