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

type Position = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';

interface Popup {
    type : 'notification' | 'message' | 'modal',
    position? : Position
}

export interface Notification {
    title : string;
    message : string;
    position? : Position; 
    visibilityTime? : number;
}

type NotificationType = "warning" | "success" | "error";

const Containter = styled.div`
transition: 200ms ease-out;
animation:  ${slideIn} 200ms ease-out;
${sizeStyle({width : "14rem", minHeight: "4rem", margin: ".5em", padding: '.6em'})}
${designStyle({shadow: true, background: "white"})}`;



export const createPopup = ({ type, position } : Popup) => {
    const defaultPosition = 'top-right';
    const containerId = type + '-container-' + position || defaultPosition;  
    const hasContainer = document.getElementById(containerId) !== null;
    const container = document.getElementById(containerId) || document.createElement('div');
    const div = document.createElement('div');
    const root = document.getElementById('root');

    if(!hasContainer){
        container.setAttribute("id", containerId);
        container.classList.add(position || defaultPosition);
        root?.appendChild(container);
    }
    container.prepend(div);
    return {
        container, child : div
    }
}

const Notification = (type : NotificationType, { title, message, position, visibilityTime } : Notification) =>{
    const defaultVisibiltyTime = 3300;
    const { container, child } = createPopup({ type: "notification", position });
    const remove = () =>{
        try{
        container.removeChild(child);
        } catch(e){
            console.log(e)
        }
    }

    const Notification = (<Containter id="111">
                            <Grid customCols="auto 1fr" textAlign="left">
                                <Icon type={type}/>
                                
                                <div style={{placeSelf: "stretch"}} className={type}>
                                    <header style={{textOverflow: "ellipsis"}}>{title}
                                    <i className="fa fa-times right" aria-hidden="true" onClick={remove} style={{ color: "darkgray", placeSelf: "start"}}></i></header>
                                    <div style={{textOverflow: "ellipsis"}}>{message}</div>
                                </div>
                               
                            </Grid>
                        </Containter>);
    
    setTimeout(()=> remove(), visibilityTime || defaultVisibiltyTime);
    ReactDOM.render(Notification, child);  
}

const Icon = ({ type } : { type : NotificationType}) => {
   let iconName: string;

   switch(type){
        case 'warning':
        iconName =  "fa fa-exclamation-triangle warning";
        break;

        case 'error':
        iconName =  "fa fa-exclamation-circle error";
        break;

        default:
        iconName = "fa fa-check-circle success";

    }
  return <i className={iconName} aria-hidden="true" style={{ placeSelf: "start"}}></i>
}

export default {
    success : (props : Notification)=> Notification("success", props),
    warning : (props : Notification)=> Notification("warning", props),
    error : (props : Notification)=> Notification("error", props),
};