import { IButton } from './types';
import { getBaseBorder } from 'styles/var/border';
import { getBaseSize } from 'styles/var/size';

export const transition = (p: IButton) => (p.ripple && p.appearance === 'solid' ? 'background 0.8s' : 'none');

export const color = (p: IButton & { theme: any }, state: '' | 'Hover' | 'Active' | 'Disabled' = '') => {
    switch (p.appearance) {
        case 'solid':
            return 'white';
        case 'stroke':
            switch (state) {
                case '':
                    return '#747A8C';
                case 'Hover':
                case 'Active':
                    return p.theme[p.color + state];
                case 'Disabled':
                default:
                    return p.theme.disabledText;
            }
        case 'round':
            if (state === 'Disabled') {
                return p.theme.disabledText;
            } else {
                return '#101934';
            }
        case 'invert':
            switch (state) {
                case '':
                    return p.theme[p.color + state];
                case 'Hover':
                case 'Active':
                    return 'white';
                case 'Disabled':
                default:
                    return p.theme.disabled;
            }
        case 'ghost':
            switch (state) {
                case '':
                case 'Hover':
                case 'Active':
                    return p.theme[p.color + state];
                case 'Disabled':
                default:
                    return p.theme.disabled;
            }
    }
    return 'white';
};

export const border = (p: IButton & { theme: any }, state: '' | 'Hover' | 'Active' | 'Disabled' = '') => {
    switch (p.appearance) {
        case 'solid':
        case 'round':
        case 'ghost':
            return 'none';
        case 'stroke':
            switch (state) {
                case '':
                case 'Hover':
                    return getBaseBorder('#DADCDF');
                case 'Active':
                    return getBaseBorder(p.theme[p.color + state]);
                case 'Disabled':
                default:
                    return getBaseBorder(p.theme.disabled);
            }
        case 'invert':
            switch (state) {
                case '':
                case 'Hover':
                case 'Active':
                    return getBaseBorder(p.theme[p.color + state]);
                case 'Disabled':
                default:
                    return getBaseBorder(p.theme.disabled);
            }
    }
    return 'none';
};
export const lineHeight = (p: IButton) => {
    let height = getBaseSize(p.size as string);
    // remove border height if button has border
    if (p.appearance !== 'solid' && p.appearance !== 'ghost') height -= 2;
    return height + 'px';
};
export const height = (p: IButton) => getBaseSize(p.size) + 'px';
export const bgColor = (p: IButton & { theme: any }, state: '' | 'Hover' | 'Active' | 'Disabled' = '') => {
    switch (p.appearance) {
        case 'solid':
            switch (state) {
                case '':
                case 'Active':
                case 'Hover':
                    return p.theme[p.color + state];
                case 'Disabled':
                default:
                    return p.theme.disabled;
            }
        case 'round':
            switch (state) {
                case 'Hover':
                    return '#fafafb';
                case 'Active':
                    return '#f1f3f4';
                case 'Disabled':
                case '':
                default:
                    return 'white';
            }
        case 'invert':
            switch (state) {
                case '':
                case 'Disabled':
                    return 'white';
                case 'Hover':
                case 'Active':
                    return p.theme[p.color + state];
                default:
                    return p.theme.disabled;
            }
        case 'ghost':
        case 'stroke':
            switch (state) {
                case '':
                case 'Hover':
                case 'Active':
                case 'Disabled':
                default:
                    return 'transparent';
            }
    }
    return 'white';
};