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

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

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

    const { map } = useContext(MapContext);
    const theme = useContext(ThemeContext);

    olLayer.on('prerender', function(event) {
        var min = 0;
        var max = 100;
        if(event.target.hasOwnProperty("swipe-min")){
            min = event.target["swipe-min"]
        }
        if(event.target.hasOwnProperty("swipe-max")){
            max = event.target["swipe-max"]
        }

        var ctx = event.context;
        var width = ctx.canvas.width * (min / 100);
        var width2 = ctx.canvas.width * (max / 100);

        ctx.save();
        ctx.beginPath();
        ctx.rect(width, 0, ctx.canvas.width - (ctx.canvas.width - width2) - width, ctx.canvas.height);
        ctx.clip();
    });

    olLayer.on('postrender', function(event) {
        var ctx = event.context;
        ctx.restore();
    });

    const handleChange = (range) => {
        layer["swipe-min"] = range[0];
		layer["swipe-max"] = range[1];

		map.render();
    };

    return (
        <div style={{display: 'flex'}}>
            <Text style={{marginRight: '20px'}} type="secondary">{ t('layerActions.swipe')  }</Text>
            <StyledSlider 
                min={0}
                max={100}
                step={0.1}
                range={true}
                defaultValue={[0, 100]}
                onChange={handleChange}
                tooltipVisible={false}
                theme={theme}
            />
        </div>
    )
}

export default LayerActionSwipe;
