import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import * as colors from '@descarteslabs/pizzazz/styles/colors';
import * as fonts from '@descarteslabs/pizzazz/styles/fonts';
import * as dimensions from '@descarteslabs/pizzazz/styles/dimensions';
import { flex_col, flex_row } from '@descarteslabs/pizzazz/styles/mixins';

import { accessClass } from '@descarteslabs/cycle-widgets/es2015/utils/access';

/* Styled components */

// Main container.
const LayerModalContainer = styled.div`
    ${flex_col()};
    margin: 0;
`;

/* Label */

const LayerModalLabelContainer = styled.div`
    flex: 1 auto;
    font-size: ${fonts.sizes.x_large};
    text-align: center;
    background-color: ${colors.primary.blue};
    color: ${colors.fill[2]};
    padding: ${dimensions.base_small} 0;
`;

/* Selectors */

const LayerModalSelectorsContainer = styled.div`
    flex: 1 auto;
    ${flex_row({ wrap: 'wrap', justify: 'space-around' })};
    padding: 1rem;
`;
const BaseSelectorContainer = styled.div`
    flex: 1 auto;
    position: relative;
    padding: ${dimensions.base_small};
`;
const BaseLabelContainer = styled.div`
    font-size: ${fonts.sizes.large};
    text-align: center;
`;
const ProductsContainer = BaseSelectorContainer.extend`
    flex: 1 0 200px;
`;
const ProductsLabelContainer = BaseLabelContainer.extend``;
const BandsAndScalesContainer = BaseSelectorContainer.extend`
    margin-bottom: -2rem;
`;
const BandsAndScalesVtreeContainer = styled.div`
    > div {
        padding: 0;
    }
`;
const BandsAndScalesLabelContainer = BaseLabelContainer.extend``;
const DateTypeContainer = BaseSelectorContainer.extend`
    flex: 1 0 110px;
`;
const DateTypeLabelContainer = BaseLabelContainer.extend``;
const TimeRangeContainer = BaseSelectorContainer.extend``;
const TimeRangeLabelContainer = BaseLabelContainer.extend``;
const ProcessingLevelContainer = BaseSelectorContainer.extend`
    flex: 1 0 150px;
`;
const ProcessingLevelLabelContainer = BaseLabelContainer.extend``;
const CloudFractionContainer = BaseSelectorContainer.extend``;
const CloudFractionLabelContainer = BaseLabelContainer.extend``;

/* Chart */

const LayerModalChartContainer = styled.div``;

/* View */

const LayerModalView = ({
    index,
    productsVtree,
    bandsAndScalesVtree,
    dateTypeVtree,
    timeRangeVtree,
    chartVtree,
    processingLevelVtree,
    cloudFractionVtree,
}) => (
    <LayerModalContainer>
        <LayerModalLabelContainer>
            {index < 0 ? 'New Layer' : `Layer ${index}`}
        </LayerModalLabelContainer>
        <LayerModalSelectorsContainer>
            <ProductsContainer key="products">
                <ProductsLabelContainer>
                    Products
                </ProductsLabelContainer>
                {productsVtree}
            </ProductsContainer>
            <TimeRangeContainer key="time-range">
                <TimeRangeLabelContainer>
                    Date Range
                </TimeRangeLabelContainer>
                {timeRangeVtree}
            </TimeRangeContainer>
            <DateTypeContainer key="date">
                <DateTypeLabelContainer>
                    Date Type
                </DateTypeLabelContainer>
                {dateTypeVtree}
            </DateTypeContainer>
            <ProcessingLevelContainer className={accessClass('processing_level')} key="processing_level">
                <ProcessingLevelLabelContainer>
                    Processing Level
                </ProcessingLevelLabelContainer>
                {processingLevelVtree}
            </ProcessingLevelContainer>
            <CloudFractionContainer key="cloud_fraction">
                <CloudFractionLabelContainer>
                    Cloud Fraction
                </CloudFractionLabelContainer>
                {cloudFractionVtree}
            </CloudFractionContainer>
            <BandsAndScalesContainer>
                <BandsAndScalesLabelContainer>
                    Bands and Scales
                </BandsAndScalesLabelContainer>
                <BandsAndScalesVtreeContainer>
                    {bandsAndScalesVtree}
                </BandsAndScalesVtreeContainer>
            </BandsAndScalesContainer>
        </LayerModalSelectorsContainer>
        <LayerModalChartContainer>
            {chartVtree}
        </LayerModalChartContainer>
    </LayerModalContainer>
);

LayerModalView.propTypes = {
    bandsAndScalesVtree: PropTypes.element.isRequired,
    chartVtree: PropTypes.element.isRequired,
    cloudFractionVtree: PropTypes.element.isRequired,
    dateTypeVtree: PropTypes.element.isRequired,
    index: PropTypes.number.isRequired,
    processingLevelVtree: PropTypes.element.isRequired,
    productsVtree: PropTypes.element.isRequired,
    timeRangeVtree: PropTypes.element.isRequired,
};

export default (
    productsVtree, bandsAndScalesVtree,
    dateTypeVtree, timeRangeVtree,
    chartVtree, processingLevelVtree,
    cloudFractionVtree,
    {
        index,
    },
) => LayerModalView({
    index,
    productsVtree,
    bandsAndScalesVtree,
    dateTypeVtree,
    timeRangeVtree,
    chartVtree,
    processingLevelVtree,
    cloudFractionVtree,
});