import React, { CSSProperties, useCallback, useState } from 'react';

import { ColorTokens } from '../../foundation/Colors';
import { TypographyTokens } from '../../foundation/Typography';
import { ExclaimTooltipProps } from '../ExclaimTooltip';
import { Popover } from '../Popover';
import { ToggleCaret } from '../ToggleCaret';
import { TooltipLabel } from '../TooltipLabel';
import { OptionsList } from './OptionList';
import { Box, IconBox, SelectorBox, SelectorButton, SelectorButtonText } from './Select.styled';

export type SelectOption<IdType extends string | number> = {
  icon?: React.ReactNode;
  id: IdType;
  isDisabled?: boolean;
  name: string;
};

export type SelectProps<Option extends SelectOption<string | number>> = {
  approving?: boolean;
  disabled?: boolean;
  label?: string;
  labelAttentionIndicatorColorToken?: ColorTokens;
  labelColorToken?: ColorTokens;
  labelTypographyToken?: TypographyTokens;
  onOptionChange: (optionId: Option['id']) => void;
  optionItemStyles?: CSSProperties;
  options: Option[];
  optionsContainerStyles?: CSSProperties;
  optionsTypographyToken?: TypographyTokens;
  placeholder?: string;
  popoverContainerStyle?: Partial<CSSStyleDeclaration>;
  renderItem?: ({
    option,
    onClick,
    disabled,
  }: {
    disabled?: boolean;
    onClick: (optionId: Option['id']) => void;
    option: Option;
  }) => React.ReactNode;
  selectBoxStyles?: CSSProperties;
  selectedOptionId?: Option['id'] | null;
  tooltip?: ExclaimTooltipProps['children'];
  tooltipColorToken?: ColorTokens;
};

export function Select<Option extends SelectOption<string | number>>({
  options,
  selectedOptionId,
  onOptionChange,
  approving,
  disabled = false,
  label,
  labelColorToken,
  labelTypographyToken,
  labelAttentionIndicatorColorToken,
  tooltip,
  tooltipColorToken,
  placeholder = 'Select an option',
  optionsTypographyToken = 'bodyMediumMedium',
  selectBoxStyles,
  optionItemStyles,
  optionsContainerStyles,
  renderItem,
  popoverContainerStyle,
}: SelectProps<Option>) {
  const [width, setWidth] = useState(0);
  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | undefined>();
  const [isSubmenuOpened, setIsSubmenuOpened] = useState(false);
  const selectedOption = options.find((option) => option.id === selectedOptionId);
  const handleSubmenuOpen = () => {
    if (disabled) {
      return;
    }
    setIsSubmenuOpened(true);
  };
  const handleSubmenuClose = () => {
    if (disabled) {
      return;
    }
    setIsSubmenuOpened(false);
  };
  const handleOptionSelection = (optionId: Option['id']) => {
    if (disabled) {
      return;
    }
    onOptionChange && onOptionChange(optionId);
    handleSubmenuClose();
  };

  const parentRef = useCallback(
    (node: HTMLDivElement) => {
      if (node && isSubmenuOpened) {
        const rect = node.getBoundingClientRect();
        const spaceBelow = window.innerHeight - rect.bottom;
        const spaceAbove = rect.top;
        const availableHeight = Math.max(spaceBelow, spaceAbove) - 16; // small padding
        setDropdownMaxHeight(availableHeight);
        setWidth(rect.width);
      }
    },
    [isSubmenuOpened],
  );

  if (options.length === 0) {
    return null;
  }

  return (
    <Popover
      containerStyle={popoverContainerStyle}
      content={
        <OptionsList
          optionItemStyles={optionItemStyles}
          options={options.map((option) => ({
            ...option,
            isActive: option.id === selectedOptionId,
          }))}
          optionsContainerStyles={{
            maxHeight: dropdownMaxHeight,
            overflowY: 'auto',
            ...optionsContainerStyles,
          }}
          optionsTypographyToken={optionsTypographyToken}
          parentWidth={width}
          renderOptionItem={renderItem}
          onClick={(optionId) => handleOptionSelection(optionId)}
        />
      }
      data-testid="GenericSelector-Popover"
      isOpen={isSubmenuOpened}
      onClickOutside={handleSubmenuClose}
    >
      <Box data-testid="GenericSelector-Box">
        <TooltipLabel
          attentionIndicatorColorToken={labelAttentionIndicatorColorToken}
          data-testid="GenericSelector-TooltipLabel"
          label={label}
          labelColorToken={labelColorToken}
          labelTypographyToken={labelTypographyToken}
          tooltip={tooltip}
          tooltipColorToken={tooltipColorToken}
        />
        <SelectorBox
          ref={parentRef}
          data-testid="GenericSelector-SelectorBox"
          disabled={disabled}
          // eslint-disable-next-line react/forbid-component-props
          style={selectBoxStyles}
          onClick={isSubmenuOpened ? handleSubmenuClose : handleSubmenuOpen}
        >
          {selectedOption?.icon && selectedOption && selectedOptionId ? (
            <IconBox data-testid="GenericSelector-IconBox">{selectedOption.icon}</IconBox>
          ) : null}
          <SelectorButton
            data-testid={isSubmenuOpened ? 'OpenSelectorButton' : 'SelectorButton'}
            disabled={disabled}
            isPopoverOpen={isSubmenuOpened}
            typographyToken={optionsTypographyToken}
          >
            <>
              <SelectorButtonText
                as="span"
                colorToken={isSubmenuOpened ? 'white100' : 'white400'}
                typographyToken={optionsTypographyToken}
              >
                {approving
                  ? 'Approve in wallet...'
                  : !selectedOptionId
                  ? placeholder
                  : selectedOption?.name || `Unknown option, ${selectedOptionId}`}
              </SelectorButtonText>
              {disabled ? null : <ToggleCaret disabled={disabled} isOpen={isSubmenuOpened} />}
            </>
          </SelectorButton>
        </SelectorBox>
      </Box>
    </Popover>
  );
}