import * as React from 'react';

import { Flex, Box } from '@rebass/grid';
import { Select, Typography, Button } from 'antd';

import { ContainerContext } from '../catalogo-context';

const { Option } = Select;

interface ConnectorVersionSelectorProps {
    versions: string[];
    onVersionSelect: (value: any) => void;
}

interface ConnectorVersionSelectorState {
    version: string;
}

export default class ConnectorVersionSelector extends React.Component<ConnectorVersionSelectorProps, ConnectorVersionSelectorState> {
    static contextType = ContainerContext;
    context!: React.ContextType<typeof ContainerContext>;

    private componentRef = null;

    constructor(props: ConnectorVersionSelectorProps) {
        super(props);

        this.componentRef = React.createRef();

        const { versions } = props;

        this.state = {
            version: versions[versions.length -1]
        }
      }

    componentDidMount() {
    }

    _handleChange = (value: string) => {
        this.setState({version: value});
    }

    render() {
        const { versions, onVersionSelect } = this.props;
        const { version } = this.state;

        return (
            <Flex ref={c => this.componentRef = c} flexDirection="column" justifyContent="center" style={{maxWidth: "350px"}} m="auto">
                 <Typography>This connector have multiple versions, select one:</Typography>
                 <Box my="10px">
                    <Select
                        style={{width: '100%'}}
                        value={version}
                        onChange={this._handleChange}
                        getPopupContainer={() => this.componentRef}
                    >
                        {
                            versions.map((v,index) => {
                                return <Option key={index} value={v}>{v}</Option>    
                            })
                        }
                    </Select>
                 </Box>
                 <Button type="primary" onClick={() => onVersionSelect({version: this.state.version})}>Continue</Button>
             </Flex>
        );
    }
}