/**
 * DevBanner component (react view)
 */
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

import * as colors from '@descarteslabs/pizzazz/styles/colors';

const ALERT = colors.red;
const WARN = colors.yellow;
const OFF = '';

// Return the appropriate color for the banner based on the supplied buildType.
function colorizer(buildType) {
    if (!buildType) return OFF;
    if (buildType.indexOf('production') !== -1) return OFF;
    if (buildType.indexOf('master') !== -1) return WARN;
    return ALERT;
}

const AppContainer = styled.div`
    height: inherit;
    width: inherit;
`;

const BannerContainer = styled.div`
    display: ${({ buildType }) => (colorizer(buildType) === OFF ? 'none' : 'block')};
    background-color: ${({ buildType }) => (colorizer(buildType))};
    color: ${colors.fill[0]};
    opacity: 0.5;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1rem;
    pointer-events: none;
    z-index: 1000;
`;

const DevBanner = ({ appVtree, buildType }) => (
    <AppContainer>
        <BannerContainer buildType={buildType}>
            {buildType}
        </BannerContainer>
        {appVtree}
    </AppContainer>
);

DevBanner.propTypes = {
    appVtree: PropTypes.element.isRequired, // vdom tree of the app.
    buildType: PropTypes.string.isRequired, // build type of the app, e.g. 'production', 'master', 'dev'.
};

export default DevBanner;