import React, { useState } from 'react';
import { Button, Modal, List, Avatar } from 'antd';
import { CloudDownloadOutlined } from '@ant-design/icons';

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

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

    const showModal = () => {
        setIsModalVisible(true);
    };
    
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const onDownload = (event) => {
        if (event.target.id == 'csv') {
            window.open(olLayer.wfs_url + '?service=WFS&request=GetFeature&version=1.0.0&outputFormat=csv&typeName=' + olLayer.layer_name);

        } else if (event.target.id == 'shp') {
            window.open(olLayer.wfs_url + '?service=WFS&request=GetFeature&version=1.0.0&outputFormat=shape-zip&typeName=' + olLayer.layer_name);
        }
    };
    
    const data = [{
        key: 'csv',
        title: 'CSV',
        description: t('layerActions.download.csv_description'),
        color: '#1e81ce',
        backgroundColor: '#9bc9ff'
    }, {
        key: 'shp',
        title: 'SHP',
        description: t('layerActions.download.shp_description'),
        color: '#1ece61',
        backgroundColor: '#9bffd0'
    }];

    
    return (
        <>
            <Button title={t('layerActions.download.download_layer')} style={{padding: '0px 0px'}} onClick={showModal} type="text" size="small" icon={<CloudDownloadOutlined style={{color: '#1890ff'}}/>}></Button>
            <Modal title={t('layerActions.download.download_layer')} visible={isModalVisible} onCancel={handleCancel} footer={null}>
            <List
                itemLayout="horizontal"
                dataSource={data}
                renderItem={item => (
                    <List.Item
                        actions={[<a id={item.key} onClick={onDownload}>{t('layerActions.download.download')}</a>]}
                    >
                        <List.Item.Meta
                            avatar={<Avatar style={{ color: item.color, backgroundColor: item.backgroundColor}}>{item.title}</Avatar>}
                            title={item.title}
                            description={item.description}
                        />
                    </List.Item>
                )}
            />
            </Modal>
        </>
    )
}

export default LayerActionDownload;