import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useMemo, useState, useRef, useEffect } from 'react';
import Icon from '../Icon/Icon.js';
import Typography from '../Typography/Typography.js';
import classNames from '../../_virtual/index.js';
import { createPortal } from 'react-dom';
import Dropdown from './components/Dropdown.js';
import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue.js';
import usePortalPosition from '../../hooks/usePortalPosition.js';
import Tooltip from '../Tooltip/Tooltip.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';

const Select = ({
  label = 'Default Label',
  showLabel = true,
  optionsList = [],
  selectedOption = {
    label: '',
    value: ''
  },
  onChange = () => {},
  errorMsg = '',
  className = '',
  optionZIndex = 1500,
  disabled = false,
  showBorder = true,
  required = true,
  optionsRequired = true,
  selectedOptionColor = 'var(--ff-select-text-color)',
  labelAccessor = '',
  valueAccessor = '',
  height = 32,
  width = '100%',
  onBlur = () => {},
  disableInput = false,
  showIcon = false,
  placeHolder = '',
  showToolTip = false,
  onCancelModal = () => {},
  onSaveModal = () => {},
  modalJSXProps = jsx(Fragment, {}),
  recurrence = false,
  showArrowIcon = true,
  showClearIcon = false,
  handelClear = () => {},
  showOptions = {
    open: false,
    toggle: false
  },
  tooltip = false,
  background = '',
  borderRadius = '0px',
  noResultsMessage,
  dropDownRef
}) => {
  const selectWidth = typeof width === 'number' ? `${width}px` : width;
  const memoizedOptionsList = useMemo(() => optionsList, [optionsList]);
  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
  const [customRecurrence, setCustomRecurrence] = useState(false);
  const [searchedOption, setSearchedOption] = useState({
    searchedText: '',
    searchedIcon: '',
    searchedIconColor: ''
  });
  const {
    searchedText,
    searchedIcon,
    searchedIconColor
  } = searchedOption;
  const [selectOptionList, setSelectOptionList] = useState([]);
  const [dropdownPosition, setDropdownPosition] = useState({
    positionX: 0,
    positionY: 0,
    width: 0,
    fromBottom: 0
  });
  const DropdownRef = useRef(null);
  const selectWrapperRef = useRef(null);
  const inputRef = useRef(null);
  const selectArrowRef = useRef(null);
  const calculatePosition = usePortalPosition(inputRef, showDropdownOptions);
  const handleIconClick = () => {
    if (disabled) return;
    setShowDropdownOptions(!showDropdownOptions);
    setSearchedOption({
      ...searchedOption,
      searchedText: getValue(selectedOption, valueAccessor) || ''
    });
    setSelectOptionList(optionsList);
    if (!showDropdownOptions && inputRef.current) {
      inputRef.current.focus();
    }
  };
  const handleChange = event => {
    if (disabled) return;
    const {
      value
    } = event.target;
    const filteredOptions = optionsList.filter(option => {
      const valueData = getValue(option, valueAccessor);
      return typeof valueData === 'string' ? valueData.toLowerCase().includes(value.toLowerCase().trim()) : valueData === Number(value);
    });
    setSelectOptionList(filteredOptions);
    setSearchedOption({
      ...searchedOption,
      searchedText: value
    });
  };
  const onSelectUpdatePosition = () => {
    if (!showDropdownOptions || !DropdownRef?.current || disabled) return;
    setDropdownPosition(calculatePosition(inputRef));
  };
  const onSelectToggleScroll = isEnabled => {
    const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
    if (isEnabled) {
      document.body.style.paddingRight = '';
      document.body.style.overflow = '';
    } else {
      document.body.style.paddingRight = `${scrollWidth}px`;
      document.body.style.overflow = 'hidden';
    }
  };
  const handleFocus = () => {
    if (disabled) return;
    setShowDropdownOptions(true);
  };
  useEffect(() => {
    if (showOptions.open) {
      setShowDropdownOptions(true);
    }
  }, [showOptions.toggle]);
  const onSelectBlur = () => {
    setShowDropdownOptions(false);
    setDropdownPosition({
      positionX: 0,
      positionY: 0,
      fromBottom: 0,
      width: 0
    });
    setSelectOptionList(optionsList);
    if (inputRef?.current === document.activeElement) {
      inputRef?.current?.blur();
      setSearchedOption({
        searchedText: getValue(selectedOption, valueAccessor) || '',
        searchedIcon: selectedOption.iconName || '',
        searchedIconColor: selectedOption.iconColor
      });
      setCustomRecurrence(false);
      onBlur();
    }
  };
  const onSelectOptionSelector = option => {
    if (disabled) return;
    const isCustomRecurrence = option?.recurrence || false;
    setCustomRecurrence(isCustomRecurrence);
    setSearchedOption({
      searchedText: getValue(selectedOption, valueAccessor),
      searchedIcon: selectedOption.iconName,
      searchedIconColor: selectedOption.iconColor
    });
    if (onChange) {
      onChange(option);
    }
    if (!isCustomRecurrence) {
      onSelectBlur();
    }
  };
  const handleResizeOrScroll = () => onSelectUpdatePosition();
  const getScrollParent = element => {
    if (!element) return null;
    let parent = element.parentElement;
    while (parent) {
      const tagName = parent.tagName.toLowerCase();
      // Skip tbody and similar non-scrollable semantic containers
      if (tagName === 'tbody') {
        parent = parent.parentElement;
        continue;
      }
      const style = window.getComputedStyle(parent);
      const overflowY = style.overflowY;
      const isScrollable = (overflowY === 'auto' || overflowY === 'scroll') && parent.scrollHeight > parent.clientHeight;
      if (isScrollable) {
        return parent;
      }
      parent = parent.parentElement;
    }
    return document.body;
  };
  useEffect(() => {
    if (!showDropdownOptions || disabled) return;
    if (optionsRequired) {
      onSelectToggleScroll(false);
    }
    onSelectUpdatePosition();
    const scrollableParent = getScrollParent(inputRef.current);
    window.addEventListener('resize', handleResizeOrScroll);
    scrollableParent?.addEventListener('scroll', onSelectBlur);
    return () => {
      onSelectToggleScroll(true);
      window.removeEventListener('resize', handleResizeOrScroll);
      scrollableParent?.removeEventListener('scroll', onSelectBlur);
    };
  }, [showDropdownOptions]);
  useEffect(() => {
    setSearchedOption({
      searchedText: getValue(selectedOption, valueAccessor),
      searchedIcon: selectedOption.iconName,
      searchedIconColor: selectedOption.iconColor
    });
  }, [selectedOption?.label, selectedOption?.value, selectedOption?.iconName, getValue(selectedOption, valueAccessor)]);
  useEffect(() => {
    setSelectOptionList(memoizedOptionsList);
  }, [memoizedOptionsList]);
  if (showLabel) {
    placeHolder = '';
  }
  return jsxs("div", {
    className: `ff-select-wrapper ${className} ${showClearIcon ? 'show-clear-icon' : ''}`,
    ref: selectWrapperRef,
    style: {
      height: `${height}px`,
      width: `${selectWidth}`,
      background: `${background}`,
      borderRadius: `${borderRadius}`
    },
    children: [jsxs("div", {
      className: classNames('ff-select', {
        'ff-select__focus': showDropdownOptions,
        'ff-select__disabled': disabled,
        'ff-select__error': !!errorMsg,
        'ff-select__error__focused': !!errorMsg && showDropdownOptions,
        'ff-select__no_border': !showBorder
      }),
      children: [showIcon && !checkEmpty(searchedIcon) && jsx(Tooltip, {
        placement: "bottom",
        title: searchedText,
        children: jsx(Icon, {
          name: searchedIcon,
          color: searchedIconColor,
          className: "ff-select-input-icon"
        })
      }), jsx(Tooltip, {
        title: tooltip ? searchedText : '',
        style: {
          width: '100%'
        },
        children: jsx("input", {
          type: "text",
          ref: inputRef,
          id: "select-input-element",
          className: classNames('ff-select-inputField', {
            'ff-select-inputField__disabled': disabled,
            'ff-select-inputField__readonly': disableInput,
            'ff-select-inputField__icon': showIcon && !checkEmpty(searchedIcon)
          }),
          onFocus: handleFocus,
          value: searchedText,
          autoCorrect: "off",
          autoComplete: "off",
          spellCheck: "false",
          style: {
            zIndex: optionZIndex,
            color: selectedOptionColor
          },
          disabled: disabled,
          onChange: handleChange,
          readOnly: disableInput,
          placeholder: placeHolder
        })
      }), optionsRequired && jsx("div", {
        ref: selectArrowRef,
        className: classNames('ff-select-arrows-wrapper', {
          'ff-select-arrows-wrapper__disabled': disabled
        }),
        onClick: handleIconClick,
        children: showArrowIcon && jsx(Icon, {
          name: "arrow_down",
          className: "ff-select-arrows",
          height: 8,
          width: 12,
          color: 'var(--brand-color)',
          "z-index": 9999
        })
      }), showLabel && jsx(Typography, {
        as: "span",
        className: classNames('ff-select-labels', {
          'ff-select-labels__icon': showIcon && !checkEmpty(searchedIcon),
          'ff-select-labels__active': searchedText
        }),
        fontSize: searchedText || showDropdownOptions ? 10 : 12,
        lineHeight: searchedText || showDropdownOptions ? '10px' : '12px',
        required: required,
        style: {
          maxWidth: `calc(${selectWidth} - 40px)`
        },
        children: label
      })]
    }), errorMsg && jsx(Typography, {
      as: "div",
      lineHeight: "15px",
      fontSize: 10,
      color: "var(--error_light)",
      className: "ff-select-error-msg",
      children: errorMsg
    }), optionsRequired && jsx("div", {
      ref: DropdownRef,
      children: showDropdownOptions && /*#__PURE__*/createPortal(jsx(Dropdown, {
        options: selectOptionList,
        dropdownPosition: dropdownPosition,
        labelAccessor: labelAccessor,
        optionZIndex: optionZIndex,
        inputRef: inputRef,
        selectArrowRef: selectArrowRef,
        onSelectBlur: onSelectBlur,
        onSelectOptionSelector: onSelectOptionSelector,
        heightFromTop: height,
        selectedOption: searchedText,
        showIcon: showIcon,
        showToolTip: showToolTip,
        customReccurenece: customRecurrence,
        onSaveModal: onSaveModal,
        onCancelModal: () => {
          onCancelModal();
          setCustomRecurrence(false);
        },
        modalJSXProps: modalJSXProps,
        recurrence: recurrence,
        valueAccessor: valueAccessor,
        showArrowIcon: showArrowIcon,
        showClearIcon: showClearIcon,
        noResultsMessage: noResultsMessage,
        ref: dropDownRef,
        searchedIcon: searchedIcon
      }), document.body)
    }), showClearIcon && jsx(Tooltip, {
      title: "Cancel",
      style: {
        zIndex: 99999
      },
      children: jsx(Icon, {
        name: "close",
        height: 16,
        width: 16,
        onClick: handelClear,
        hoverEffect: true
      })
    })]
  });
};

export { Select as default };
//# sourceMappingURL=Select.js.map
