/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {JSX, useEffect, useState} from 'react';

import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';

import {documentationLinks} from 'constants/links';
import {CapabilitiesType, capabilities} from 'constants/capabilities';

import {AdvancedSelect, IAdvancedSelectItem} from 'components/ui/advanced-select';
import {NewTabLink} from 'components/new-tab-link';
import Theme from 'theme';

interface ICapabilities {
  selectedItems: IAdvancedSelectItem[];
  setSelectedItems: (items: IAdvancedSelectItem[]) => void;
  data?: IAdvancedSelectItem[];
  label?: string;
  labelColor?: string;
  iconColor?: string;
  capabilitiesSetTitle?: string;
  className?: string;
  allowMultiple?: boolean;
}

export const Capabilities = ({
  label,
  labelColor = Theme.colors.white,
  iconColor = Theme.colors.white,
  data = capabilities,
  selectedItems,
  setSelectedItems,
  capabilitiesSetTitle = '',
  className,
  allowMultiple = true
}: ICapabilities): JSX.Element => {
  const [capabilitiesSet, setCapabilitiesSet] = useState(data);

  useEffect(() => {
    const filteredCapabilities = data.filter(capability => {
      return capabilitiesSetTitle ? capability.type.includes(capabilitiesSetTitle) : true;
    });

    setCapabilitiesSet(filteredCapabilities);
  }, [capabilitiesSetTitle]);

  return (
    <AdvancedSelect
      allowMultiple={allowMultiple}
      label={label}
      labelColor={labelColor}
      labelIcon={capabilitiesSetTitle !== CapabilitiesType.Quality ? <NewTabLink link={documentationLinks.supportedStreamCapabilities} icon={faQuestionCircle} iconColor={iconColor} /> : undefined}
      data={capabilitiesSet}
      selectedItems={selectedItems}
      setSelectedItems={setSelectedItems}
      className={className}
    />
  );
};

export default Capabilities;