import React from 'react';
import { arrayOf, shape, func } from 'prop-types';
import styled from 'styled-components';
import { media, PAGE_WRAP_MARGIN, NAVIGATION_WIDTH_CONTRACTED_UNIT, FOOTER_HEIGHT } from '@vincent_za/styles';

import Undo from './Undo/component';

const Wrap = styled.div`
  position: fixed;
  bottom: ${FOOTER_HEIGHT + 2}rem;
  z-index: 1;
  left: 2rem;
  display: flex;
  flex-direction: column-reverse;

  ${media.sm`
    left: ${NAVIGATION_WIDTH_CONTRACTED_UNIT + PAGE_WRAP_MARGIN + 2}rem;
  `};
`;

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

  render() {
    const { undos, onUndo, onRemove } = this.props;

    return (
      <Wrap>
        {
          undos.map((undo) => {
            return (
              <Undo details={undo} onUndo={onUndo} onRemove={onRemove} key={undo.id} />
            );
          })
        }
      </Wrap>
    );
  }
}

Undos.propTypes = {
  undos: arrayOf(shape({})).isRequired,
  onUndo: func.isRequired,
  onRemove: func.isRequired,
};

export default Undos;
