import React, { useState, useContext } from 'react';
import classNames from 'classnames';
import { Dropdown, DROPDOWN_PLACEMENT_TYPES } from '../../../dropdown';
import { Input } from '../../../input';
import { Button, BUTTON_TYPES } from '../../../button';
import { useInputValidation, required, isUrl } from '../../../hooks/use-input-validation';
import { BLOCK_TYPES } from '../../text-editor-constants';
import TextEditorService from '../../text-editor-service';
import TextEditorContext from '../../text-editor-context';
import EditorButton from './editor-button';
import { useTextEditorDefaultTranslations } from '../../text-editor-hooks';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function LinkButton({
  icon,
  tooltip,
  urlIsRequiredMessage,
  enterValidUrlMessage,
  saveButtonText,
  validationErrorWarningMessage,
  ariaLabel
}) {
  const defaultTranslations = useTextEditorDefaultTranslations();
  const {
    slate,
    slateReact
  } = useContext(TextEditorContext);
  const textEditorService = new TextEditorService(slate, slateReact);
  const editor = slateReact.useSlate();
  const [url, setUrl] = useState('');
  const isLinkActive = textEditorService.isBlockActive(editor, BLOCK_TYPES.LINK);
  const urlProps = useInputValidation([url, setUrl], {
    validations: [required(urlIsRequiredMessage ?? defaultTranslations.urlIsRequiredMessage), isUrl(enterValidUrlMessage ?? defaultTranslations.enterValidUrlMessage)]
  }, {
    validationErrorWarningMessage: validationErrorWarningMessage ?? defaultTranslations.validationErrorWarningMessage
  });
  return /*#__PURE__*/_jsx(Dropdown, {
    placement: DROPDOWN_PLACEMENT_TYPES.BOTTOM_START,
    renderAnchor: ({
      ref,
      onClick
    }) => /*#__PURE__*/_jsx("span", {
      ref: ref,
      children: /*#__PURE__*/_jsx(EditorButton, {
        testId: "link-button",
        className: classNames({
          active: isLinkActive
        }),
        tooltipText: tooltip ?? defaultTranslations.tooltipTextLink,
        icon: icon,
        onClick: e => {
          setUrl('');
          onClick(e);
        }
      })
    }),
    children: ({
      closeDropdown
    }) => /*#__PURE__*/_jsxs("div", {
      className: "custom-link-dropdown",
      children: [/*#__PURE__*/_jsx("span", {
        className: "link-input",
        children: /*#__PURE__*/_jsx(Input, {
          id: "link-input",
          fieldTestId: "link-input",
          placeholder: 'https://www.datarobot.com/',
          isHorizontalLayout: true,
          "aria-label": ariaLabel,
          ...urlProps
        })
      }), /*#__PURE__*/_jsx(Button, {
        type: BUTTON_TYPES.SUBMIT,
        className: "save-link-button",
        testId: "save-button",
        onClick: () => {
          // If Url is valid
          if (urlProps.validity === null) {
            textEditorService.focus(editor);
            textEditorService.insertLink(editor, url);
            closeDropdown();
          }
        },
        children: saveButtonText ?? defaultTranslations.saveButtonText
      })]
    })
  });
}
export default LinkButton;