import React from 'react';

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

const theming = theme => ({
    localeSwitch: {
        display: 'flex'
    },
    localeSwitchSelect: {},
});

class ArticleDetailLocaleSwitch extends React.Component {

    state = {
        selectedLocale: false
    };

    localeSwitch = () => {
        const {localeSwitch} = this.props;
        if(localeSwitch) {
            if(this.state.selectedLocale) {
                localeSwitch(this.state.selectedLocale);
            }
        } else {
            console.error('localeSwitch not assigned to ArticleDetailLocaleSwitch.');
        }
    };

    render() {
        const {
            classes, t,
            localesPossible, locales, localeActive,
        } = this.props;

        return (
            <div className={classes.localeSwitch}>
                <Select className={classes.localeSwitchSelect}
                        defaultValue={localeActive}
                        onChange={(e) => this.setState({selectedLocale: e.target.value})}
                        style={{
                            maxWidth: '150px',
                        }}
                >
                    {0 < localesPossible.length ?
                        localesPossible.map((locale, i) => (
                            <option key={i} value={locale}
                            >{'*' === locale ? t('locale.universal-locale') : locale}{-1 !== locales.indexOf(locale) ? ' •' : ''}</option>
                        )) : null
                    }
                </Select>
                <ButtonSmall onClick={this.localeSwitch} style={{flexShrink: 0}}>{t('locale.switch-to')}</ButtonSmall>
            </div>
        )
    };
}

export default withTheme(injectSheet(theming)(ArticleDetailLocaleSwitch));