import { Loader, MultiSelect, rem } from '@mantine/core';
import { IconComponents } from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';
import useSWR from 'swr';
import { post } from '../utils/post';

export function CampaignsMultiSelect({ campaigns, onChange }) {
  const { data, error, isLoading, isValidating, mutate } = useSWR(
    'wp_bannerize_get_campaigns',
    post,
  );

  const icon = <IconComponents style={{ width: rem(16), height: rem(16) }} />;

  const handleOnChange = value => {
    onChange(value);
  };

  const options = data
    ? typeof data === 'object' && !Array.isArray(data)
      ? Object.values(data).map(campaign => ({
          value: `${campaign.term_id}`,
          label: campaign.name,
        }))
      : data.map(campaign => ({
          value: `${campaign.term_id}`,
          label: campaign.name,
        }))
    : [];

  return (
    <MultiSelect
      comboboxProps={{ shadow: 'md' }}
      leftSectionPointerEvents="none"
      leftSection={isLoading || !data ? <Loader size="xs" /> : icon}
      size="xs"
      disabled={isLoading || !data}
      placeholder={__('Pick one or more Campaigns...', 'wp-bannerize')}
      data={options}
      value={campaigns}
      onChange={handleOnChange}
      searchable
    />
  );
}