/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import Breadcrumbs from 'gatsby-core-theme/src/components/atoms/breadcrumbs';
import moduleStyles from 'gatsby-core-theme/src/components/molecules/module/module.module.scss';

import Search from 'gatsby-core-theme/src/components/molecules/search';
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './search.module.scss';

const SearchContent = ({ page, serverData, allMarkets , pageContext}) => {
  const searchURLPageName = page.path;
  return (
    <div className={`${styles.searchPage} ${moduleStyles.module} module`}>
      {page.path && <Breadcrumbs page={page} />}
      <Search
        serverData={serverData}
        allMarkets={allMarkets}
        pageContext={pageContext}
        searchURLPageName={searchURLPageName}
        pageSearchOptions={{
          searchTitle: useTranslate('search_results_for', 'Search Results for:'),
          useArchive: true,
          archiveOptions: {
            titles: [
              { type: 'operator', title: useTranslate('casino', 'Casino') },
              { type: 'game', title: useTranslate('slots', 'Slots') },
              { type: 'article', title: useTranslate('news', 'News') },
              {
                type: 'payment_method',
                title: useTranslate('payment_method', 'Payment method'),
              },
              {
                type: 'software_provider',
                title: useTranslate('software_provider', 'Software Provider'),
              },
              { type: 'page', title: useTranslate('default_pages', 'Default') },
            ],
            includeOptions: {
              desktop_num_of_columns: '3',
              mobile_num_of_columns: '1',
              tablet_num_of_columns: '3',
            },
          },
          tabs: true,
          tabsOptions: { showAll: useTranslate('all', 'All'), tabsAlign: 'left' },
          sort: [
            {
              name: useTranslate('latest', 'Latest'),
              field: 'created_at',
              type: 'date',
            },
            {
              name: useTranslate('most_relevant', 'Most Relevant'),
              field: 'id',
              type: 'number',
            },
            {
              name: useTranslate('by_title', 'By Title'),
              field: 'title',
              type: 'string',
            },
          ],
          loadMore: {
            label: useTranslate('show_more', 'Show more'),
            limit: 3,
            increment: 6,
            usePrimaryButton: false,
            useInvertColors: true,
          },
        }}
      >
        {() => (
          <>
            <div type="page">{/* <CardArticle item={item} /> */}</div>
            <div type="operator">{/* <CardOperator item={item} /> */}</div>
            <div type="game">{/* <CardGame item={item} /> */}</div>
            <div type="article">{/* <CardArticle item={item} /> */}</div>
            <div type="payment_method">{/* <PaymentMethods item={item} /> */}</div>
            <div type="software_provider">{/* <SoftwareProvider item={item} /> */}</div>
          </>
        )}
      </Search>
    </div>
  );
};

SearchContent.propTypes = {
  serverData: PropTypes.shape({}),
  allMarkets: PropTypes.shape({}),
  pageContext: PropTypes.shape({}),
  page: PropTypes.shape({
    template: PropTypes.string,
    path: PropTypes.string,
    updated_at: PropTypes.string,
    created_at: PropTypes.string,
    author: PropTypes.shape({
      name: PropTypes.string,
    }),
  }),
};

export default SearchContent;
