import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { flex_col, flex_row } from '@descarteslabs/pizzazz/es2015/mixins';

const TimeRangePickerContainer = styled.div``;
const SelectorsContainer = styled.div`
    ${({ vertical }) => (vertical
        ? flex_col({ justify: 'space-around', align: 'center' })
        : flex_row({ justify: 'space-around', align: 'center' })
    )}
`;
const StartTimeVtreeContainer = styled.div`
    flex-shrink: 1;
    flex-grow: 1;
    margin-bottom: ${({ vertical }) => (vertical ? '0.375rem' : '0')};
`;
const EndTimeVtreeContainer = styled.div`
    flex-shrink: 1;
    flex-grow: 1;
    position: relative;
`;
const NowContainer = styled.div`
    position: absolute;
    ${({ vertical }) => (vertical
        ? css`
            top: 0;
            margin-top: 2.25rem;
            padding-top: 0.1875rem;
        `
        : css`
            bottom: 0;
            margin-bottom: 2.25rem;
            padding-bottom: 0.1875rem;
        `
    )}
    right: 50%;
    margin-right: -1.125rem;
`;
const NowButton = styled.button`
    &:hover {
        background: rgba(14, 114, 179, 0.8);
        cursor: pointer;
    }

    width: 2.25rem;
    color: #fff;
    font-family: Source Sans Pro;
    font-weight: 300;
    font-size: 0.8rem;
    text-decoration: none;
    text-align: center;
    background: rgba(14, 113, 179, 1);
    border: none;
    border-radius: 2px;
    outline: none;
`;

const TimeRangePickerView = ({
    vertical,
    startTimeVtree,
    endTimeVtree,
    onClickNow,
}) => (
    <TimeRangePickerContainer>
        <SelectorsContainer
            vertical={vertical}
        >
            <StartTimeVtreeContainer
                vertical={vertical}
            >
                {startTimeVtree}
            </StartTimeVtreeContainer>
            <EndTimeVtreeContainer>
                <NowContainer
                    onClick={onClickNow}
                    vertical={vertical}
                >
                    <NowButton>
                        Now
                    </NowButton>
                </NowContainer>
                {endTimeVtree}
            </EndTimeVtreeContainer>
        </SelectorsContainer>
    </TimeRangePickerContainer>
);

TimeRangePickerView.propTypes = {
    endTimeVtree: PropTypes.element.isRequired,
    startTimeVtree: PropTypes.element.isRequired,
    vertical: PropTypes.bool.isRequired,
    onClickNow: PropTypes.func.isRequired,
};

export default (
    startTimeVtree,
    endTimeVtree,
    { vertical, onClickNow }
) => TimeRangePickerView({
    vertical,
    startTimeVtree,
    endTimeVtree,
    onClickNow,
});