import { useCallback, useState, type ReactElement } from 'react';
import { Merge } from 'lucide-react';
import { Modal } from '@mantine/core';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
import { MergeBusinessesSelectionForm } from './merge-businesses-selection-form.js';

export function MergeBusinessesButton(props: {
  selected: { id: string; onChange: () => void }[];
  resetMerge: () => void;
}): ReactElement {
  const [opened, setOpened] = useState(false);
  const close = useCallback((): void => setOpened(false), []);
  const { selected, resetMerge } = props;
  const distinctIDs = new Set(selected.map(({ id }) => id));
  const isMergeable = distinctIDs.size >= 1;
  const variant = isMergeable ? 'default' : 'outline';

  const onDone = useCallback(() => {
    close();
    selected.map(({ onChange }) => onChange());
  }, [selected, close]);

  return (
    <>
      <Button
        onClick={(): void => {
          if (isMergeable) setOpened(true);
        }}
        disabled={!isMergeable}
        variant={variant}
        className={cn('size-7.5', isMergeable ? ' bg-blue-500 hover:bg-blue-500/90' : '')}
        size="icon"
      >
        <Merge className="size-5" />
      </Button>
      <Modal opened={opened} onClose={close} size="auto" centered>
        <MergeBusinessesSelectionForm
          businessIds={Array.from(distinctIDs)}
          onDone={onDone}
          resetMerge={resetMerge}
        />
      </Modal>
    </>
  );
}