import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormattedMessage, useIntl } from "react-intl";
import { Button } from "@gooddata/sdk-ui-kit";
import { isDrillToCustomUrlConfig } from "../../types.js";
import { DropdownSectionHeader } from "./DropdownSectionHeader.js";
function UrlDropdownOption({ urlValue, closeDropdown, }) {
    return (_jsx("div", { onClick: closeDropdown, className: "gd-list-item gd-menu-item gd-drill-to-custom-url-option s-drill-to-custom-url-option gd-icon-hyperlink-disabled is-selected", children: _jsx("span", { children: urlValue.length > 50 ? `${urlValue.substring(0, 50)}...` : urlValue }) }));
}
function EditButton({ urlValue, toggleModal }) {
    const intl = useIntl();
    const buttonTitle = urlValue
        ? intl.formatMessage({
            id: "configurationPanel.drillIntoUrl.customUrlEditButtonLabel",
        })
        : intl.formatMessage({
            id: "configurationPanel.drillIntoUrl.customUrlAddButtonLabel",
        });
    const buttonIconLeft = urlValue ? undefined : "gd-icon-add";
    return (_jsx(Button, { className: "gd-button gd-button-secondary gd-button-small s-drill-to-custom-url-button", iconLeft: buttonIconLeft, onClick: toggleModal, value: buttonTitle }));
}
export function CustomUrlSection(props) {
    const { urlDrillTarget, closeDropdown } = props;
    const urlValue = isDrillToCustomUrlConfig(urlDrillTarget) ? urlDrillTarget.customUrl : undefined;
    return (_jsxs(_Fragment, { children: [
            _jsx(DropdownSectionHeader, { children: _jsx(FormattedMessage, { id: "configurationPanel.drillIntoUrl.customUrlSectionTitle" }) }), !!urlValue && _jsx(UrlDropdownOption, { urlValue: urlValue, closeDropdown: closeDropdown }), _jsx("div", { className: "gd-drill-to-custom-url-button-wrapper", children: _jsx(EditButton, { ...props, urlValue: urlValue }) })
        ] }));
}
