import React from 'react';
import ReactDOM from 'react-dom';
import { bool, string, func, node } from 'prop-types';
import styled from 'styled-components';
import {
  mediaWidthMax,
  REM_UNIT_LG,
  FONT_BOLD,
  STEEL_BLUE,
  SONIC_SILVER,
  GRAY_X11,
} from '@vincent_za/styles';
import { closeSvg } from '@vincent_za/assets';
import Svg from '../../Svg/component';

import { CN_MODAL, CLASSNAME_HEADER, MODAL_CLASSNAME_CONTENT } from '../constants';

const Wrap = styled.div`
  display: ${props => props.isVisible ? 'flex' : 'none'};
  z-index: 3;
  position: fixed;
  top: 50%;
  left: 50%;
  flex-grow: 1;
  flex-direction: column;
  text-transform: none;
  outline: none;
  background-color: #fff;
  box-shadow: 3px 3px 11px -9px #000;
  user-select: ${props => props.isTouchDevice ? 'none' : 'inherit'};
  transform: translate(-50%, -50%);

  ${mediaWidthMax.xsm`
    transform: none !important;
  `};
`;

const InnerWrap = styled.div`
  position: relative;
`;

const Header = styled.header`
  display: flex;
  padding: ${REM_UNIT_LG};
  line-height: 1rem;
  text-transform: uppercase;
  font-family: ${FONT_BOLD};
  color: #ADCCC8;
  cursor: ${props => props.isDraggable ? 'move' : 'inherit'};
  white-space: nowrap;
  user-select: none;
`;

const Content = styled.div`
  padding-bottom: ${REM_UNIT_LG};
  color: ${SONIC_SILVER};
`;

const Icon = styled(Svg)`
  display: flex;
  box-sizing: content-box;
  margin-left: auto;
  padding-left: 2rem;
  width: 1rem;
  height: 1rem;
  fill: #e8e8e8;
  cursor: pointer;
  visibility: hidden;

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

  ${mediaWidthMax.xsm`
    position: fixed;
    top: 0;
    right: 0;
    padding: ${REM_UNIT_LG};
  `};

  ${Wrap}:hover & {
    visibility: visible;
  };
`;

class ResizeAndDrag extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isModalActive !== this.props.isModalActive) return true;
    if (nextProps.title !== this.props.title) return true;
    if (nextProps.id !== this.props.id) return true;
    if (nextProps.children !== this.props.children) return true;
    return false;
  }

  render() {
    const {
      isTouchDevice,
      isModalActive,
      hasOverlay,
      title,
      id,
      children,
      onOverlayToggle,
      portalSelector,
    } = this.props;

    return ReactDOM.createPortal(
      <Wrap
        isTouchDevice={isTouchDevice}
        isVisible={isModalActive}
        tabIndex={0}
        className={CN_MODAL}
      >
        <InnerWrap>
          <Header className={CLASSNAME_HEADER} ref={(el) => { this.modalRef = el; }}>
            {title}
            <Icon svg={closeSvg} onClick={event => onOverlayToggle({ event, id, hasOverlay, showOverlay: false })} />
          </Header>
          {isModalActive && <Content className={MODAL_CLASSNAME_CONTENT}>{children}</Content>}
        </InnerWrap>
      </Wrap>,
      document.querySelector(portalSelector || '#app')
    );
  }
}

ResizeAndDrag.propTypes = {
  isTouchDevice: bool.isRequired,
  isModalActive: bool.isRequired,
  hasOverlay: bool.isRequired,
  title: string.isRequired,
  id: string.isRequired,
  children: node.isRequired,
  portalSelector: string,
  onOverlayToggle: func.isRequired,
};

ResizeAndDrag.defaultProps = {
  portalSelector: undefined,
};

export default ResizeAndDrag;
