import React, { useState, useContext } from 'react';
import { StyledSlider } from '../Styled';
import ThemeContext from '../../../theme/ThemeContext';
import { Typography } from 'antd';
const { Text } = Typography;

/**
 * TODO
 */
function LayerActionOpacity (props) {
    const { olLayer, t } = props;

    const theme = useContext(ThemeContext);

    const [layer, setLayer] = useState(olLayer);

    const handleChange = (opacity) => {
        layer.setOpacity(opacity);
    };

    return (
        <div style={{display: 'flex'}}>
            <Text type="secondary">{ t('layerActions.opacity') }</Text>
            <StyledSlider 
                min={0.1}
                max={1}
                step={0.1}
                defaultValue={1}
                onChange={handleChange}
                tooltipVisible={false}
                theme={theme}
            />
        </div>
    )
}

export default LayerActionOpacity;
