import styled, { css } from 'styled-components';
import { animated } from 'react-spring';
import Icon from 'kwai-icon';
import theme from 'styles/theme';

import { Spinner as Spin } from '../spinner';
export const Spinner = styled(Spin)`
    position: absolute;
    left: 16px;
    top: 10px;
`;
const TypeColorMapping = {
    info: '#00A5AA',
    error: '#ff5a5e',
    success: '#3ccc3b',
    warning: '#ffab1a',
};

const TypeColorMappingBorder = {
    info: '#77C8D2',
    error: '#FFA7A9',
    success: '#98E396',
    warning: '#FFD285',
};

const TypeColorMappingBg = {
    info: '#F0F9FA',
    error: '#FFF1F0',
    success: '#F5FCF2',
    warning: '#FFFAF2',
};

export const ErrorIcon = styled(Icon).attrs(() => ({
    name: 'CloseInvert',
    size: 'small',
    color: '#ff5a5e',
    fillColorRule: '&&& path:first-child',
}))`
    &&& {
        position: absolute;
        top: 8px;
        left: 16px;
        width: 20px;
        height: 20px;
    }
`;

export const ErrorIconNotification = styled(ErrorIcon)`
    &&&& {
        left: 24px;
        width: 24px;
        height: 24px;
        top: 16px;
    }
`;

export const InfoIcon = styled(Icon).attrs(() => ({
    name: 'InfoInvert',
    size: 'small',
    color: '#00A5AA',
    fillColorRule: '&&& path:last-child',
}))<any>`
    &&&& {
        position: absolute;
        top: 8px;
        left: 16px;
        width: 20px;
        height: 20px;
        path:last-child {
            fill: ${p => (p.warning ? '#ffab1a' : p.theme.brand)};
        }
    }
`;
InfoIcon.defaultProps = { theme };
export const InfoIconNotification = styled(InfoIcon)`
    &&&&& {
        left: 24px;
        width: 24px;
        height: 24px;
        top: 16px;
    }
`;

export const SuccessIcon = styled(Icon).attrs(() => ({
    name: 'CheckedInvert',
    size: 'small',
    color: '#3ccc3b',
    fillColorRule: '&&& path:last-child',
}))`
    &&& {
        position: absolute;
        top: 8px;
        left: 16px;
        width: 20px;
        height: 20px;
    }
`;

export const SuccessIconNotification = styled(SuccessIcon)`
    &&& {
        left: 24px;
        width: 24px;
        height: 24px;
        top: 16px;
    }
`;

export const CloseIcon = styled(Icon).attrs(() => ({
    name: 'Close',
    color: '#868da1',
}))<any>`
    position: absolute;
    pointer-events: all;
    top: 16px;
    right: 16px;
    cursor: pointer;
`;

export const Container = styled.div<any>`
    position: fixed;
    z-index: 9999;
    top: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    align-items: ${p => (p.type === 'message' ? 'center' : 'flex-end')};
    @media (max-width: 680px) {
        align-items: center;
    }
`;

export const Message = styled(animated.div)`
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    padding: 0 16px 0 44px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 2px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #101934;
    line-height: 36px;
    will-change: opacity, height;
`;

export const MessageContent = styled.div``;

export const Notification = styled(animated.div)<any>`
    box-sizing: border-box;
    position: relative;
    will-change: opacity, height;

    overflow: hidden;
    width: ${p => (p['data-alter'] ? 336 : 400)}px;
    margin-bottom: 20px;
    background: ${p => (p['data-alter'] ? 'white' : (TypeColorMappingBg as any)[p.type])};
    ${p =>
        p['data-alter']
            ? css`
                  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.24);
              `
            : css<any>`
                  border: 1px solid ${p => (TypeColorMappingBorder as any)[p.type]};
              `};

    border-radius: 2px;
`;

export const Content = styled.div<any>`
    ${p =>
        p['data-alter']
            ? css<any>`
                  padding-top: 16px;
                  padding-bottom: 16px;
                  padding-left: ${p => (p.hasIcon ? 56 : 16)}px;
                  padding-right: ${p => (p.hasIcon ? 44 : 21)}px;
              `
            : css`
                  padding: 18px 66px 16px 64px;
              `};
`;

export const Title = styled.div`
    font-size: 16px;
    color: #101934;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`;

export const Desc = styled.div`
    font-size: 14px;
    color: #4d5666;
    line-height: 20px;
`;

export const Life = styled(animated.div)<any>`
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    //background-image: linear-gradient(130deg, #00b4e6, #00f0e0);
    background-color: ${p => (TypeColorMapping as any)[p.type]};

    height: 3px;
`;

export const MessageLife = styled(animated.div)<any>`
    position: absolute;
    left: 0;
    bottom: 0;
    width: auto;
    background-color: ${p => (TypeColorMapping as any)[p.type]};
    height: 1px;
`;