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

import StyleGrid from '../lib/StyleGrid';
import {withTheme, combineStyle} from "../lib/theme";


/**
 * Style for Form Components
 */
const styling = {
    button: theme => ({
        color: theme.textColor,
        border: '1px solid ' + theme.accent.blue,
        background: 'none',
        padding: theme.gutter.base * 2 + 'px ' + theme.gutter.base * 4 + 'px',
    }),
    buttonSmall: theme => ({
        fontSize: '0.875rem',
        color: theme.textColor,
        border: '1px solid ' + theme.accent.blue,
        background: 'none',
        padding: theme.gutter.base + 'px ' + theme.gutter.base * 2 + 'px',
    }),
    label: theme => ({
        display: 'block',
        padding: theme.gutter.base * 2 + 'px 0',
    }),
    input: theme => ({
        text: {
            color: theme.textColor,
            width: '100%',
            border: '0',
            //borderBottom: '1px solid ' + theme.input.borderColor,
            background: theme.input.background,
            padding: theme.gutter.base * 2 + 'px ' + theme.gutter.base * 4 + 'px',
            transition: theme.transition + ' background, ' + theme.transition + ' border-color',
            '&[readonly]': {
                // todo: optimize readonly and apply bg on after which will be overlayed
                background: 'repeating-linear-gradient(-45deg, #222 4px,' + theme.input.background + ' 20px);'
            }
        },
        textarea: {
            borderBottom: '1px solid ' + theme.input.borderColor,
            padding: theme.gutter.base * 2 + 'px ' + theme.gutter.base * 4 + 'px',
            width: '100%',
            [StyleGrid.mdUp]: {
                width: 'auto'
            }
        }
    }),
    group: theme => ({
        wrapper: {
            display: 'block',
            padding: theme.gutter.base * 2 + 'px 0',
        }
    }),
    req: theme => ({
        required: theme.formReq.required,
        optional: theme.formReq.optional
    })
};

//
// Form Render Components

// Button
const Button = withTheme(props => {
    let style = combineStyle(styling.button(props.theme), props.style);
    return <button {...props} style={style}/>
});

const ButtonSmall = withTheme(props => {
    let style = combineStyle(styling.buttonSmall(props.theme), props.style);
    return <button {...props} style={style}/>
});

// Label
const Label = withTheme(props => {
    let style = combineStyle(styling.label(props.theme), props.style);
    return <label {...props} style={style}/>
});

// Input: Text
const InputTextStyled = withTheme((props) => {
    let style = combineStyle(styling.input(props.theme).text, props.style);
    // todo: try to move out of render
    const p = {...props};
    const innerRef = p.innerRef;
    delete p.innerRef;
    return <input type='text' ref={innerRef} {...p} style={style}/>
});

const InputText = React.forwardRef((props, ref) => {
    return <InputTextStyled {...props} innerRef={ref}/>
});

// Input: Textarea
const InputTextareaStyled = withTheme((props) => {
    let style = combineStyle(styling.input(props.theme).textarea, props.style);
    // todo: try to move out of render
    const p = {...props};
    const innerRef = p.innerRef;
    delete p.innerRef;
    return <textarea ref={innerRef} {...p} style={style}/>
});

const InputTextarea = React.forwardRef((props, ref) => {
    return <InputTextareaStyled {...props} innerRef={ref}/>
});

//
// Input Grouping

const InputGroup = withTheme(props => {
    let style = {
        wrapper: styling.group(props.theme)
    };
    if(props.style) {
        style.wrapper = combineStyle(style.wrapper, props.style.wrapper);
    }
    return <div {...props} style={style.wrapper}/>
});

//
// Form Text Utils

const TextReq = withNamespaces(['form'])(withTheme(props => {
    let style = combineStyle(styling.req(props.theme), props.style);
    return <p><span style={style.required}>{props.t('required')}</span>, <span style={style.optional}>{props.t('optional')}</span></p>
}));


//
// Exporting Public Components

export {Button, ButtonSmall, Label};

export {InputText, InputTextarea};

export {InputGroup};

export {TextReq};