import { keyframes } from 'styled-components';

const getEnteringAnimation = (position) => {
    switch (position) {
        case 'bottom-right':
        case 'top-right':
            return keyframes `
          from { transform: translateX(100%); opacity: 0; }
          to { transform: translateX(0%); opacity: 1; }
        `;
        case 'top-left':
        case 'bottom-left':
            return keyframes `
          from { transform: translateX(-100%); opacity: 0; }
          to { transform: translateX(0%); opacity: 1; }
        `;
        case 'top':
            return keyframes `
          from { transform: translateY(-100%); opacity: 0; }
          to { transform: translateY(0%); opacity: 1; }
        `;
        case 'bottom':
            return keyframes `
          from { transform: translateY(100%); opacity: 0; }
          to { transform: translateY(0%); opacity: 1; }
        `;
        default:
            return 'Invalid position!';
    }
};
const getExitingAnimation = (position) => {
    switch (position) {
        case 'bottom-right':
        case 'top-right':
            return keyframes `
          from { transform: translateX(0%); opacity: 1; }
          to { transform: translateX(100%); opacity: 0; }
        `;
        case 'top-left':
        case 'bottom-left':
            return keyframes `
          from { transform: translateX(0%); opacity: 1; }
          to { transform: translateX(-100%); opacity: 0; }
        `;
        case 'top':
            return keyframes `
          from { transform: translateY(0%); opacity: 1; }
          to { transform: translateY(-100%); opacity: 0; }
        `;
        case 'bottom':
            return keyframes `
          from { transform: translateY(0%); opacity: 1; }
          to { transform: translateY(100%); opacity: 0; }
        `;
        default:
            return 'Invalid position!';
    }
};

export { getEnteringAnimation, getExitingAnimation };
