import { Button, Group, Select } from '@mantine/core';
import { IconArrowUpFromArc, IconTools } from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';
import { useState } from 'react';

export function BulkActions({
  analytic = 'clicks',
  selectedRecords,
  onBulkAction,
}) {
  const [value, setValue] = useState('');

  const handleClick = () => {
    onBulkAction(value, analytic, selectedRecords);
  };

  return (
    <Group>
      <Select
        size="xs"
        disabled={selectedRecords.length === 0}
        placeholder={__('Bulk Actions', 'wp-bannerize')}
        data={['Delete']}
        value={value}
        clearable
        onChange={setValue}
        leftSection={<IconTools size={14} />}
        inputContainer={children => (
          <Group align="flex-start">
            {children}
            <Button
              rightSection={<IconArrowUpFromArc size={14} />}
              onClick={handleClick}
              disabled={
                selectedRecords.length === 0 || !value || value?.length === 0
              }
              size="xs">
              {__('Apply', 'wp-bannerize')}
            </Button>
          </Group>
        )}
      />
    </Group>
  );
}