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 BannersMultiSelect({ banners, onChange }) {
  const { data, error, isLoading, isValidating, mutate } = useSWR(
    'wp_bannerize_get_banners',
    post,
  );

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

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

  const options = data
    ? data.map(banner => ({
        value: `${banner.ID}`,
        label: banner.post_title,
      }))
    : [];

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