import { toOption } from '@rh-support/utils';
import isEmpty from 'lodash/isEmpty';
import noop from 'lodash/noop';
import React, { useContext, useMemo } from 'react';
import { CreateCaseStateContext } from '../../context/CreateCaseContext';
import { Dropdown } from '../shared/input/DropdownList';

interface IProps { }

export default function ProductNVersion(props: IProps) {
    const { createCaseState: { product, version } } = useContext(CreateCaseStateContext);
    return useMemo(() => {
        return (<div className="form-group open-case-product-wrapper">
            <Dropdown<string>
                className="open-case-product"
                id={`product-dropdown-disabled`}
                selectedItem={toOption<string>(product)}
                list={[]}
                title={`Product dropdown`}
                disabled={true}
                isInValid={isEmpty(product)}
                onChange={noop}
            />
            <Dropdown<string>
                className="open-case-version"
                id={`version-dropdown-disabled`}
                selectedItem={toOption<string>(version)}
                list={[]}
                title={`Version dropdown`}
                isInValid={isEmpty(version)}
                disabled={true}
                onChange={noop}
            />
        </div>);
    }, [props, product, version]);
}
