var merge = require('merge');

module.exports = {
    switch: function(options) {
        var defaultOptions = {
            checkedColor: 'primary'
        };

        return function({ config, addComponents }) {
            var defaultOptions = {
                bulletColor: config('colors.primary')
            };

            if (typeof options === 'undefined') {
                options = {};
            }

            options = merge(defaultOptions, options);

            var c = {
                '.fancy-switch': {
                    position: 'relative',
                    padding: '20px 0 20px 40px',
                    textAlign: 'left',
                    display: 'inline-block',
                    'span': {
                        position: 'relative',
                        cursor: 'pointer'
                    },
                    'input[type="checkbox"] + span:before': {
                        content: '""',
                        position: 'absolute',
                        top: '50%',
                        left: '-39px',
                        marginTop: '-10px',
                        width: '30px',
                        height: '20px',
                        background: '#f7f7f7',
                        borderRadius: '10px',
                        boxShadow: '0 0 1px grey'
                    },

                    'input[type="checkbox"]': {
                        position: 'absolute',
                        top: '0',
                        left: '-9999px',
                        visibility: 'hidden'
                    },

                    'input[type="checkbox"] + span:after': {
                        position: 'absolute',
                        content: '""',
                        top: '50%',
                        left: '-37px',
                        width: '16px',
                        height: '16px',
                        marginTop: '-8px',
                        opacity: '0.5',
                        zIndex: '10',
                        cursor: 'pointer',
                        borderRadius: '8px',
                        transition: 'left 0.15s ease-in-out, opacity 0.15s ease-in-out',
                        background: options.bulletColor
                    },


                    'input[type="checkbox"]:disabled:checked + span:after': {
                        opacity: 0.5
                    },

                    'input[type="checkbox"]:disabled + span:before': {
                        opacity: 0.5
                    },

                    'input[type="checkbox"]:checked + span:after': {
                        opacity: 1,
                        left: '-28px',
                        transition: 'left 0.15s ease-in-out, opacity 0.15s ease-in-out'
                    }
                }
            };

            addComponents(c, {
                respectPrefix: false
            });
        };
    },

    checkbox: function(options) {
        var defaultOptions = {
            checkedColor: 'primary'
        };

        return function({ config, addComponents }) {
            var defaultOptions = {
                bulletColor: config('colors.primary')
            };

            if (typeof options === 'undefined') {
                options = {};
            }

            options = merge(defaultOptions, options);

            var c = {
                '.fancy-checkbox': {
                    position: 'relative',
                    padding: '20px 0 20px 40px',
                    textAlign: 'left',
                    display: 'inline-block',
                    'span': {
                        position: 'relative',
                        cursor: 'pointer'
                    },
                    'input[type="checkbox"] + span:before': {
                        content: '""',
                        position: 'absolute',
                        top: '50%',
                        left: '-39px',
                        marginTop: '-15px',
                        width: '30px',
                        height: '30px',
                        background: '#f7f7f7',
                        borderRadius: '2px',
                        boxShadow: '0 0 1px grey'
                    },

                    'input[type="checkbox"]': {
                        position: 'absolute',
                        top: '0',
                        left: '-9999px',
                        visibility: 'hidden'
                    },

                    'input[type="checkbox"] + span:after': {
                        position: 'absolute',
                        content: '""',
                        top: '50%',
                        left: '-34px',
                        width: '20px',
                        height: '20px',
                        marginTop: '-10px',
                        opacity: '0',
                        zIndex: '9',
                        cursor: 'pointer',
                        borderRadius: '2px',
                        transform: 'translate3d(-40px, 0, 0) scale(0.5)',
                        transition: 'transform 0.15s ease-in-out, opacity 0.15s ease-in-out',
                        background: options.bulletColor
                    },


                    'input[type="checkbox"]:disabled:checked + span:after': {
                        opacity: 0.5
                    },

                    'input[type="checkbox"]:disabled + span:before': {
                        opacity: 0.5
                    },

                    'input[type="checkbox"]:checked + span:after': {
                        opacity: 1,
                        transform: 'translate3d(0, 0, 0) scale(1)',
                        transition: 'transform 0.15s ease-in-out, opacity 0.15s ease-in-out'
                    }
                }
            };

            addComponents(c, {
                respectPrefix: false
            });
        };
    },

    radio: function(options) {
        return function ({ addComponents, config }) {
            var defaultOptions = {
                bulletColor: config('colors.primary')
            };

            if (typeof options === 'undefined') {
                options = {};
            }

            options = merge(defaultOptions, options);

            addComponents({
                '.fancy-radio': {
                    position: 'relative',
                    padding: '20px 0 20px 40px',
                    textAlign: 'left',
                    display: 'inline-block',
                    'span': {
                        position: 'relative',
                        cursor: 'pointer'
                    },
                    'input[type="radio"] + span:before': {
                        content: '""',
                        position: 'absolute',
                        top: '50%',
                        left: '-40px',
                        marginTop: '-15px',
                        width: '30px',
                        height: '30px',
                        background: '#f7f7f7',
                        borderRadius: '50%',
                        boxShadow: '0 0 1px grey'
                    },

                    'input[type="radio"]': {
                        position: 'absolute',
                        top: '0',
                        left: '-9999px',
                        visibility: 'hidden'
                    },

                    'input[type="radio"] + span:after': {
                        position: 'absolute',
                        content: '""',
                        top: '50%',
                        left: '-35px',
                        width: '20px',
                        height: '20px',
                        marginTop: '-10px',
                        opacity: '0',
                        zIndex: '10',
                        cursor: 'pointer',
                        borderRadius: '50%',
                        transform: 'translate3d(-40px, 0, 0) scale(0.5)',
                        transition: 'transform 0.15s ease-in-out, opacity 0.15s ease-in-out',
                        background: options.bulletColor
                    },

                    'input[type="radio"]:checked + span:after': {
                        opacity: 1,
                        transform: 'translate3d(0, 0, 0) scale(1)',
                        transition: 'transform 0.15s ease-in-out, opacity 0.15s ease-in-out'
                    }
                }
            }, {
                respectPrefix: false
            });
        };
    },

    tooltip: function(options) {
        return function({ addComponents, config }) {
            var t = {};
            var colors = config('colors');
            var placements = [
                { position: 'left', borderAt: 'right' },
                { position: 'right', borderAt: 'left' },
                { position: 'top', borderAt: 'bottom' },
                { position: 'bottom', borderAt: 'top' }
            ];

            t['.tooltip'] = {
                '.tooltip-arrow': {
                    borderWidth: '10px',
                    borderTopColor: 'transparent',
                    borderLeftColor: 'transparent',
                    borderRightColor: 'transparent',
                    borderBottomColor: 'transparent',
                    content: '""',
                    position: 'absolute'
                }
            }

            Object.keys(colors).forEach((color) => {
                placements.forEach((placement) => {
                    var arrow = {};
                    arrow[placement.borderAt] = '-20px';
                    arrow[`border-${placement.position}-color`] = config('colors.'+color);
                    t[`.tooltip.tooltip-${color}[x-placement="${placement.position}"]`] = {
                        '.tooltip-arrow': arrow
                    }
                });

                t['.tooltip.tooltip-'+color] = {
                    background: config('colors.'+color)
                };
            });

            addComponents(t);
        }
    },

    range: function(options) {
        return function({ addComponents, config }) {
            // Base Colors
            options = merge({
                'shade10': '#2c3e50',
                'shade1': '#d7dcdf',
                'shade0': '#fff',
                'teal': '#1abc9c',
                'width': '100%',
                'handleColor': '#2c3e50',
                'handleColorHover': '#1abc9c',
                'handleSize': '20px',
                'trackColor': '#d7dcdf',
                'trackHeight': '10px',
                'labelColor': '#2c3e50',
                'labelWidth': 80
            }, options);

            var c = {
                '.range-slider': {
                    'width': options.width
                },

                '.range-slider__range': {
                    '-webkitAppearance': 'none',
                    'width': 'calc(100% - ' + (options.labelWidth + 13) + 'px)',
                    'height': options.trackHeight,
                    'borderRadius': '5px',
                    'background': options.trackColor,
                    'outline': 'none',
                    'padding': 0,
                    'margin': 0,
                    // Range Handle
                    '&::-webkit-slider-thumb': {
                        'appearance': 'none',
                        'width': options.handleSize,
                        'height': options.handleSize,
                        'borderRadius': '50%',
                        'background': options.handleColor,
                        'cursor': 'pointer',
                        'transition': 'background 0.15s ease-in-out',
                        '&:hover': {
                          background: options.handleColorHover
                        }
                    },
                    '&:active::-webkit-slider-thumb': {
                        background: options.handleColorHover
                    },
                    '&::-moz-range-thumb': {
                        'width': options.handleSize,
                        'height': options.handleSize,
                        'border': 0,
                        'borderRadius': '50%',
                        'background': options.handleColor,
                        'cursor': 'pointer',
                        'transition': 'background 0.15s ease-in-out',
                        '&:hover': {
                            background: options.handleColorHover
                        }
                    },
                    '&:active::-moz-range-thumb': {
                        background: options.handleColorHover
                    },
                    '&:focus': {
                        '&::-webkit-slider-thumb': {
                            boxShadow: '0 0 0 3px ' + options.shade0 + ', 0 0 0 6px ' + options.teal
                        }
                    }
                },
                '.range-slider__value': {
                    'display': 'inline-block',
                    'position': 'relative',
                    'width': options.labelWidth,
                    'color': options.shade0,
                    'lineHeight': '20px',
                    textAlign: 'center',
                    borderRadius: '3px',
                    background: options.labelColor,
                    padding: '5px 10px',
                    marginLeft: '8px',
                    '&:after': {
                        position: 'absolute',
                        top: '8px',
                        left: '-7px',
                        width: '0',
                        height: '0',
                        borderTop: '7px solid transparent',
                        borderRight: '7px solid '+options.labelColor,
                        borderBottom: '7px solid transparent',
                        t: '""',
                    }
                },
                '::-moz-range-track': {
                    background: options.trackColor,
                    border: 0
                },
                'input::-moz-focus-inner, input::-moz-focus-outer': {
                    border: 0
                }
            };

            addComponents(c, {
                respectPrefix: false
            });
        }
    },
    stepper: function(options) {
        return function({ addComponents, config }) {
            options = merge({
                c: {}
            }, options);

            var c = {
                'ul.stepper': {
                    position: 'relative',
                    listStyleType: 'none !important',
                    paddingLeft: '0 !important',
                    display: 'flex',
                    justifyContent: 'space-between',
                    marginLeft: '-20px',
                    marginRight: '-20px',
                    li: {
                        flex: '1 0 0',
                        padding: '0 20px',
                        position: 'relative',
                        '&.done': {
                            'a .step-icon': {
                                backgroundColor: '#575757 !important',
                            },
                            'a .label': {
                                color: '#575757 !important',
                            }
                        },
                        a: {
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            flexDirection: 'column',
                            textDecoration: 'none',
                            color: '#ccc',
                            zIndex: '5',
                        },
                        'a .step-icon': {
                            width: '50px',
                            height: '50px',
                            borderRadius: '50%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            fontSize: '25px',
                            color: 'white',
                            backgroundColor: '#ccc',
                        },
                        'a .step-icon svg': {
                            fill: 'currentColor',
                            width: '25px',
                            height: '25px'
                        },
                        'a .label': {
                            fontSize: '1.3em',
                            marginTop: '10px',
                        },
                        '&:not(:first-child):before': {
                            position: 'absolute',
                            content: '""',
                            borderBottom: '#ccc solid 1px',
                            zIndex: '3',
                            top: '25px',
                            width: 'calc((100% - 50px))',
                            left: 'calc((100% - 50px) / -2)',
                        }
                    }
                }
            };

            var colors = config('colors');
            Object.keys(colors).forEach((color) => {
                c['ul.stepper.stepper-'+color] = {
                    'li.current .step-icon': {
                        background: config('colors.'+color)
                    },
                    'li.current .step-label': {
                        color: config('colors.'+color)
                    },
                    'li.current:not(:first-child):before, li.done:not(:first-child):before': {
                        borderBottomColor: config('colors.'+color)
                    }
                }
            });

            addComponents(merge.recursive(c, options.c), {
                respectPrefix: false
            });
        };
    },
    arrow: function(options) {
        return function({ addComponents, config }) {
            options = merge({

            }, options);

            var c = {
                '.arrow-down': {
                    'position': 'relative',
                    '&:after': {
                        'top': '100%',
                        'left': '50%',
                        'border': 'solid transparent',
                        'content': '" "',
                        'height': '0',
                        'width': '0',
                        'position': 'absolute',
                        'pointerEvents': 'none',
                        'borderWidth': '20px',
                        'marginLeft': '-20px'
                    }
                }
            };
            var colors = config('colors');

            Object.keys(colors).forEach((color) => {
                c['.arrow-down.bg-'+color] = {
                    '&:after': {
                        'borderColor': 'rgba(229, 0, 118, 0)',
                        'borderTopColor': config('colors.'+color)
                    }
                };
            });

            addComponents(c);
        }
    }
};