import { Checkbox, Combobox } from '@mantine/core';
import { useMemo } from 'react';

import type { BoxerItem } from '../Boxer.types';

interface UseBoxerOptionsProps {
  boxerData: Array<BoxerItem>;
  multiSelect?: boolean;
  onOptionSubmit: (index: number) => void;
  value?: any | Array<any>;
}

const useBoxerOptions = (props: UseBoxerOptionsProps) => {
  const { boxerData, multiSelect, onOptionSubmit, value } = props;

  const options = useMemo(() => {
    return boxerData.map((item, index) => {
      const isSelected = multiSelect
        ? Array.isArray(value) && value.includes(item.value)
        : value === item.value;

      return (
        <Combobox.Option
          active={isSelected}
          key={`${item.value}-${index}`}
          onClick={() => {
            onOptionSubmit(index);
          }}
          value={String(index)}
        >
          {multiSelect ? (
            <div style={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
              <Checkbox checked={isSelected} onChange={() => {}} tabIndex={-1} />
              <span>{item.label}</span>
            </div>
          ) : (
            item.label
          )}
        </Combobox.Option>
      );
    });
  }, [boxerData, value, multiSelect, onOptionSubmit]);

  return { options };
};

export default useBoxerOptions;