// @flow
import React from 'react';
import styled from 'styled-components';
import type { ToastCentreProps } from './toast-centre.proptypes';
import { toastCentrePropTypes } from './toast-centre.proptypes';
import { Toast } from '../toast';

const StyledToastCentre = styled.div`
  pointer-events: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  padding: 30px;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 10;
`;

export const ToastCentre = ({ messages = [] }: ToastCentreProps) => (
  <StyledToastCentre>
    {messages.map(({ text, ...toastProps }) => (
      <Toast key={toastProps.id} {...toastProps}>
        {text}
      </Toast>
    ))}
  </StyledToastCentre>
);

ToastCentre.displayName = 'ToastCentre';
ToastCentre.propTypes = toastCentrePropTypes;
