import React from 'react';
import styled from 'styled-components';
import '../main.scss'
import { slideIn , slideInLeft} from '../animation';
import { designStyle, sizeStyle } from '../generator';

interface PanelProps {
    style? : React.CSSProperties,
    children : React.ReactElement;
    close : ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) ;
    show : boolean;
    background? : string;
    width? : number | string;
    position ?: 'right' | 'left';
};

export const Panel = ({style, children, show, close, background, width, position}: PanelProps) => {
  if(!show) return null;

  const Container = styled.div`
    position: absolute;
    top: 0;
    z-index: 20;
    bottom: 0;
    ${position === 'left'? 'left :' : 'right :'} 0;
    ${sizeStyle({width : width || '250px', padding: ".5em"})}
    ${designStyle({ shadow : true, background : background || "white"})}
    animation : ${position !== 'left'? slideIn : slideInLeft} 200ms ease-out;`;

  return (
  <Container style={style}>
      <i 
        onClick={close} 
        className="fa fa-times-circle" 
        style={{color : 'red', fontSize: "1.5em"}}
      ></i><br/>
      {children}
  </Container>);
}

export default Panel;