import React, { useMemo } from 'react';
import { defaultTo, filter, map, pipe, prepend } from 'ramda';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import { isAvailableTenantForEntityType, isEmptyValue } from '@reltio/mdm-sdk';
import { DropDownMenuButton } from '../DropDownMenuButton';
import { TenantIcon } from '../TenantIcon';
import { TenantMenuItem } from './components/TenantMenuItem';
import { useMdmDataTenants, useMdmTenantObject } from '../contexts/MdmModuleContext';
import { useStyles } from './styles';
export var TenantsDropDownSelector = function (_a) {
    var entityTypeUri = _a.entityTypeUri, onChangeTenant = _a.onChangeTenant, selectedTenant = _a.selectedTenant;
    var styles = useStyles();
    var dataTenants = useMdmDataTenants();
    var customerTenant = useMdmTenantObject();
    var menuItems = useMemo(function () {
        return pipe(defaultTo([]), filter(isAvailableTenantForEntityType(entityTypeUri)), map(function (dataTenant) { return ({
            tenant: dataTenant,
            onClick: onChangeTenant
        }); }), prepend({
            tenant: customerTenant,
            onClick: onChangeTenant
        }))(dataTenants);
    }, [dataTenants, entityTypeUri, onChangeTenant, customerTenant]);
    if (isEmptyValue(dataTenants) || !onChangeTenant) {
        return null;
    }
    return (React.createElement(DropDownMenuButton, { menuId: 'tenantSelector', MenuItemRenderer: TenantMenuItem, buttonContent: React.createElement(TenantIcon, { tenant: selectedTenant }), menuItems: menuItems, buttonProps: {
            variant: 'outlined',
            endIcon: React.createElement(ArrowDropDownIcon, null),
            classes: {
                root: styles.menuButtonRoot
            }
        }, popoverProps: {
            anchorOrigin: {
                vertical: 'bottom',
                horizontal: 'left'
            },
            transformOrigin: {
                vertical: 'top',
                horizontal: 'left'
            }
        } }));
};
