import React, { useState } from 'react';
import { createNamespace } from '../../../../../tools/namingTools';
import { localePropTypes } from '../../../../../constants/prop-types/config';
import { LIGHT } from '../../../../../constants/themeColor';
import Select from '../../../../../atoms/select/Select';

import './styles/FooterLanguages.scss';

const n = createNamespace('FooterLanguages');

const FooterLanguages = ({
    code,
    available
}) => {
    const [currentLanguage, setCurrentLanguage] = useState(code);

    if (!available || !available.length) {
        return null;
    }

    const onLanguageSwitch = ({ newValue }) => {
        if (newValue) {
            setCurrentLanguage(newValue);
        }
    };

    return (
        <div {...n('wrapper').props}>
            <Select
                withBackground={false}
                theme={LIGHT.value}
                value={currentLanguage}
                size="auto"
                options={available}
                onChange={onLanguageSwitch}
            />
        </div>
    );
};

FooterLanguages.propTypes = { ...localePropTypes };

FooterLanguages.defaultProps = {
    code: null,
    available: null
};

export default FooterLanguages;
