import React from 'react';
import {withNamespaces} from "react-i18next";

import {withTheme, injectSheet} from '../../lib/theme';
import {Select, InputText} from "../../component/Form";

const theming = (theme) => ({
    wrapper: {
        display: 'flex'
    },
    qty: {
        width: '20%',
        marginRight: theme.gutter.base * 2 + 'px'
    },
    country: {
        width: '20%'
    },
    timeRange: {
        display: 'flex',
        flexWrap: 'wrap',
        marginRight: theme.gutter.base * 2 + 'px'
    },
    timeRangeFrom: {
        width: '20%',
        flexGrow: '3',
        marginRight: theme.gutter.base * 2 + 'px'
    },
    timeRangeTo: {
        width: '20%',
        flexGrow: '3',
        marginLeft: theme.gutter.base * 2 + 'px'
    }
});

class OrdersControl extends React.Component {

    render() {
        const {t, theme, classes} = this.props;

        return (
            <div className={classes.wrapper}>
                <div className={classes.qty}>
                    <p style={{marginTop: 0, marginBottom: theme.gutter.base}}>{t('controls.qty')}</p>
                    <Select>
                        <option>50</option>
                        <option>100</option>
                        <option>250</option>
                    </Select>
                </div>
                <div className={classes.timeRange}>
                    <p style={{width: '100%', marginTop: 0, marginBottom: theme.gutter.base}}>{t('controls.time-range')}</p>
                    <div className={classes.timeRangeFrom}>
                        <label>{t('controls.time-range-from')}</label>
                        <InputText type='date' name={'from'}/>
                    </div>
                    <div className={classes.timeRangeTo}>
                        <label>{t('controls.time-range-to')}</label>
                        <InputText type='date' name={'to'}/>
                    </div>
                </div>
                <div className={classes.country}>
                    <p style={{marginTop: 0, marginBottom: theme.gutter.base, whiteSpace: 'pre'}}>{t('controls.by-country')}</p>
                    <Select>
                        <option>*</option>
                        <option>de-DE</option>
                        <option>en-US</option>
                    </Select>
                </div>
            </div>
        )
    };
}

export default withNamespaces('page--shop-order')(withTheme(injectSheet(theming)(OrdersControl)));