@import '../../base/components/bubble.styl';

invertedPositions = {
    top: bottom,
    bottom: top,
    left: right,
    right: left
};

// Generate arrow styles based on the specified position. Arrow will always be placed in the center,
// but this can be overridden by additional CSS provided by the consumer (or another Droplets component).
positionArrow(position) {
    // Add the inverted position as a property name. Example: 'left: -6px' when position is 'right'.
    add-property(position, '-%s' % bubble--arrow--size);

    // Add shared styles depending on whether position is top/bottom or left/right.
    if (position == top || (position == bottom)) {
        left: 'calc(50% - %s)' % bubble--arrow--size;
        border-left: bubble--arrow--size solid transparent;
        border-right: bubble--arrow--size solid transparent;
    } else {
        top: 'calc(50% - %s)' % bubble--arrow--size;
        border-bottom: bubble--arrow--size solid transparent;
        border-top: bubble--arrow--size solid transparent;
    }
}

// Add the colored part of the border based on the position. Example: 'border-left: 6px solid grey' when position is 'left'.
renderArrowBorder(position, color) {
    add-property('border-%s' % invertedPositions[position], bubble--arrow--size solid color);
}

// Generate each arrow style for each position and each variant
generateArrowStyles() {
    positions = top left right bottom;

    for position in positions {
        &--{position}::after {
            positionArrow(position);
        }

        // TODO: can you interpolate variable names?
        &--{position}&--light::after {
            renderArrowBorder(position, bubble--light--arrow--background-color);
        }

        &--{position}&--dark::after {
            renderArrowBorder(position, bubble--dark--arrow--background-color);
        }
    }
}

.d-bubble {
    border-radius: bubble--border-radius;
    padding: bubble--padding;
    z-index: 3000;

    &--light {
        background-color: bubble--light--background-color;
        box-shadow: bubble--light--box-shadow;
        color: bubble--light--color;
    }

    &--dark {
        background-color: bubble--dark--background-color;
        box-shadow: bubble--dark--box-shadow;
        color: bubble--dark--color;
    }

    // TODO: can generateArrowStyles do this?
    &--top, &--bottom, &--left, &--right {
        &::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
        }
    }

    generateArrowStyles();
}