import React, { useEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { is } from 'ramda';
import { Checkbox, Tooltip } from '@mui/material';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
import { Option as BaseOption } from './AutocompleteStyles';
import Typography from '../../dataDisplay/Typography';
const Option = ({ optionLabel, createdLabel, selected, withCheckboxes, option, ...rest }) => {
    const optionRef = useRef(null);
    const [isOverflow, setIsOverflow] = useState(false);
    const label = createdLabel ? `${createdLabel} "${optionLabel}"` : optionLabel;
    useEffect(() => {
        setIsOverflow(optionRef?.current?.scrollWidth > optionRef?.current?.clientWidth);
    }, []);
    return withCheckboxes ? (React.createElement("li", { ...rest },
        React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
        optionLabel)) : (React.createElement(Tooltip, { title: optionLabel, disableHoverListener: !isOverflow },
        React.createElement("li", { ...rest, "aria-disabled": is(String, option) ? false : option?.isDisabled },
            React.createElement(BaseOption, { ref: optionRef },
                React.createElement(Typography, null, label)))));
};
Option.propTypes = {
    optionLabel: PropTypes.string.isRequired,
    selected: PropTypes.bool,
    withCheckboxes: PropTypes.bool,
    createdLabel: PropTypes.string,
    option: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
};
export default Option;
//# sourceMappingURL=Option.js.map