import styled from 'styled-components';
import { animated } from 'react-spring';
import theme from 'styles/theme';
import Icon from 'kwai-icon';
import { IAlertType } from './types';

const bgColorMap: Map<IAlertType, string> = new Map();
const borderColorMap: Map<IAlertType, string> = new Map();
const iconNameMap: Map<IAlertType, string[]> = new Map();
const iconColorMap: Map<IAlertType, string> = new Map();

const types: IAlertType[] = ['success', 'info', 'warning', 'error'];
const bgColors = ['#F5FCF2', '#F0FAFA', '#FFFAF2', '#FFF1F0'];
const borderColors = ['#98E396', '#7FD3D5', '#FFD285', '#FFA7A9'];
const iconNames = [
    ['CheckedCircle', 'CheckedInvert'],
    ['InfoOutline', 'InfoInvert'],
    ['InfoOutline', 'InfoInvert'],
    ['ErrorCircle', 'ErrorCircle'],
];
const iconColors = [theme.encourage, theme.brand, theme.assist, theme.warning];

types.forEach((type, index) => {
    bgColorMap.set(type, bgColors[index]);
    borderColorMap.set(type, borderColors[index]);
    iconNameMap.set(type, iconNames[index]);
    iconColorMap.set(type, iconColors[index]);
});

export const Wrapper = styled.div<any>`
    position: relative;
    display: flex;
    align-items: ${p => (p.hasdesc ? 'flex-start' : 'center')};
    box-sizing: border-box;
    margin: 0;
    padding: ${p => (p.hasdesc ? '16px 20px 16px 24px' : '8px 20px 8px 14px')};
    font-size: ${p => (p.hasdesc ? '16px' : '14px')};
    line-height: 20px;
    word-wrap: break-word;
    background-color: ${p => bgColorMap.get(p.type)};
    border: ${p => `1px solid ${bgColorMap.get(p.type)}`};
    border-radius: 2px;
    list-style: none;
    font-family: MicrosoftYaHei;
    font-variant: tabular-nums;
    font-feature-settings: 'tnum';
    & .alert-icon {
        width: ${p => (p.hasdesc ? '24px' : '16px')};
        height: ${p => (p.hasdesc ? '24px' : '16px')};
    }
`;

export const Content = styled.div<any>`
    flex: 1 0 auto;
    margin-left: ${p => (p.hasdesc ? '16px' : '10px')};
`;

export const Message = styled.span<any>`
    display: block;
    color: #101934;
`;

export const Description = styled.span<any>`
    display: ${p => (p.hasdesc ? 'block' : 'none')};
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #4d5666;
`;

export const AlertIcon = styled(Icon).attrs((p: any) => {
    const names = iconNameMap.get(p.type);
    const name = p.hasdesc ? names![0] : names![1];
    const color = iconColorMap.get(p.type);
    return { name, color };
})<any>``;

export const CloseButton = styled.button`
    display: block;
    overflow: hidden;
    color: #868da1;
    font-size: 14px;
    line-height: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
`;

export const CloseIcon = styled(Icon).attrs(() => ({
    name: 'Close',
    color: '#868DA1',
}))<any>``;