import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { OverflowTypography } from '../../OverflowTypography';
import { useHidePersonalData } from '../../personalDataSecurity';
import { Tooltip } from '../../Tooltip';
import { menuOrganizationClassnames } from '../constants';
import { OrganizationData } from '../styles';
import { Container, StyledButton, StyledChevron, StyledTypography, } from './styles';
export const OrganizationButton = forwardRef(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, renderPreview, }, ref) => {
    const { name, inn, kpp } = currentOrganization;
    const hidePersonalDataClassname = useHidePersonalData({
        isEnabled: isHidePersonalData,
    });
    const renderButton = () => (_jsx(StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, className: menuOrganizationClassnames.button, endIcon: _jsx(StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
            className: hidePersonalDataClassname,
        })) : (_jsxs(Container, { className: hidePersonalDataClassname, children: [_jsx(OverflowTypography, { variant: "h6", component: "div", children: name }), _jsxs(OrganizationData, { className: menuOrganizationClassnames.organizationData, children: [_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && (_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
    if (isDisabled && disabledReason) {
        return (_jsx(Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
    }
    return renderButton();
});
