import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';

const SearchWidget = () => {
  const widgetRef = useRef();
  const searchPage = {
    name: 'searchPage',
    component: window.ShutterstockWidget.components.SearchPage,
    props: {
      mediaType: 'images',
      title: 'Shutterstock UI Search Widget',
      subtitle: '',
      dynamicTitle: true,
      dynamicSubtitle: true,
      showMore: true,
      showSearchBar: true,
      onItemClick: (e, item) => {
        e.preventDefault();
        console.log(item);
      }
    }
  };

  useEffect(() => {
    const widgetConfig = {
      key: '0OviQeVft2KY9BiFNJF8XRPvTe3ZXUFS',
      pages: [searchPage],
      container: widgetRef.current,
    };

    // eslint-disable-next-line no-undef
    if (typeof window === 'object' && window.ShutterstockWidget) {
      // eslint-disable-next-line no-undef
      const widgetInstance = new window.ShutterstockWidget(widgetConfig);
      widgetInstance.getPage('searchPage').search();
      widgetRef.current = widgetInstance;
    }
  }, []);

  return <div ref={widgetRef} />;
};

export default SearchWidget;