import React, { Component } from 'react';
import { bool, string, func, node } from 'prop-types';
import styled from 'styled-components';
import { SONIC_SILVER, PASTEL_GRAY, ONYX, JET } from '@vincent_za/styles';
import { PageVHWrap } from '../component';
import Svg from '../../Svg/component';

const Wrap = styled.div`
  z-index: 1;
  position: absolute;
  display: flex;
  flex-direction: column;

  ${props => props.isRight && `
    left: 100%;
  `};

  ${props => !props.isRight && `
    right: 100%;
  `};

  ${props => props.isOpen && `
    position: relative;
    left: auto;
    right: auto;
  `};
`;

const Toggle = styled.div`
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: ${ONYX};
  fill: ${SONIC_SILVER};
  cursor: pointer;
  transform: translate(0, -50%);
  transition: transform 0.2s cubic-bezier(0, 0, 0.51, 0.99), opacity 0.2s cubic-bezier(0, 0, 0.51, 0.99);
  transition-delay: 0.1s;

  ${props => !props.isRight && `
    left: 100%;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  `};

  ${props => props.isRight && `
    right: 100%;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  `};

  &:hover {
    fill:${PASTEL_GRAY};
    transform: translate(0, -50%);
    opacity: 1;
    transition-delay: 0s;
  };

  ${props => props.isOpen && `
    fill:${PASTEL_GRAY};
    opacity: 0.6;
    transform: ${props.isRight ? 'translate(28px, -50%)' : 'translate(-28px, -50%)'};
  `};
`;

const Content = styled(PageVHWrap)`
  position: relative;
  flex-direction: column;
  flex-grow: 1;
  background-color: ${JET};
  box-shadow: ${props => props.isOpen ? '3px 0rem 12px -6px #1b1b1b' : 'none'};
`;

class PageSidePane extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: props.isOpenByDefault,
    };
  }

  shouldComponentUpdate() {
    return true;
  }

  onToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
    this.props.onToggle();
  }

  render() {
    const { isOpen } = this.state;
    const { isRight, toggleIcon, children } = this.props;

    return (
      <Wrap isOpen={isOpen} isRight={isRight}>
        <Toggle isOpen={isOpen} isRight={isRight} onClick={this.onToggle}>
          <Svg svg={toggleIcon} size={1.6} />
        </Toggle>
        <Content>
          {children}
        </Content>
      </Wrap>
    );
  }
}

PageSidePane.propTypes = {
  isOpenByDefault: bool,
  isRight: bool,
  toggleIcon: string.isRequired,
  onToggle: func,
  children: node.isRequired,
};

PageSidePane.defaultProps = {
  isOpenByDefault: false,
  isRight: false,
  onToggle() {},
};

export default PageSidePane;
