import styled from 'styled-components';
import { StyleTypes } from '../../styles';
import * as React from 'react';

interface Props {
    open: boolean;
    origin: Origin;
    color?: string;
    type?: StyleTypes;
}

export interface Origin {
    vertical: 'bottom' | 'top';
    horizontal: 'left' | 'right';
}

const getPosition = (origin: Origin) => {
    const top = 'top: 10px;';
    const bottom = 'bottom: 10px;';
    const left = 'left: 10px;';
    const right = 'right: 10px;';
    let styles = '';

    switch(origin.vertical){
    case 'bottom':
        styles += bottom;
        break;
    case 'top':
        styles += top;
        break;
    default:
        styles += top;
    }

    switch(origin.horizontal){
    case 'left':
        styles += left;
        break;
    case 'right':
        styles += right;
        break;
    default:
        styles += left;
    }

    return styles;
};

const getType = (type: StyleTypes) => {
    switch(type){
    case 'error':
        return `
                background-color: #e60f0f;
            `;
    case 'warning':
        return `
                background-color: #f18b16;
            `;
    case 'success':
        return `
                background-color: #03a513;
            `;
    case 'info':
        return `
                background-color: #0757a0
            `;
    }
};

const StyledSnackbar = styled.div<Props>` 
    ${props => getPosition(props.origin)}

    ${props => props.open &&
        'animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;'
}

    ${props => !props.open &&
        'opacity: 0; animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;'
}

    position: absolute;
    background: #0cd4ca;
    color: #fff;
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    min-width: 200px;
    min-height: 50px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    word-break: break-word;

    ${props => props.type && getType(props.type)}

    @media(max-width: 575px){
        max-width: 550px;
        width: 90%;
    }

    @keyframes fadeIn {
        from {
            ${props => props.origin.vertical === 'top' ? 'transform: translateY(-100px);' : 'transform: translateY(100px);'}
            opacity: 0;
        }
        to {
            ${props => props.origin.vertical === 'top' ? 'transform: translateY(10px);' : 'transform: translateY(-10px);'}
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            background: transparent;
            opacity: 1;
            ${props => props.origin.vertical === 'top' ? 'transform: translateY(10px);' : 'transform: translateY(-10px);'}
        }
        to {
            ${props => props.origin.vertical === 'top' ? 'transform: translateY(-100px);' : 'transform: translateY(100px);'}
            opacity: 0;
        }
    }
    
`;

export default StyledSnackbar;