/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/forbid-prop-types */
import React, { useContext } 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 { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Search from 'gatsby-core-theme/src/components/molecules/search';
import styles from './search.module.scss';

const SearchContent = ({ page }) => {
  const { translations } = useContext(Context) || {};
  const searchURLPageName = page.path;
  return (
    <div className={`${styles.searchPage} ${moduleStyles.module} module`}>
      {page.path && <Breadcrumbs page={page} />}
      <Search
        searchURLPageName={searchURLPageName}
        page={page}
        searchIcon="../../../../../../images/search.svg"
        pageSearchOptions={{
          searchTitle: translate(translations, 'search_results_for', 'Search Results for:'),
          useArchive: true,
          archiveOptions: {
            titles: [
              { type: 'operator', title: translate(translations, 'casino', 'Casino') },
              { type: 'game', title: translate(translations, 'slots', 'Slots') },
              { type: 'article', title: translate(translations, 'news', 'News') },
              {
                type: 'payment_method',
                title: translate(translations, 'payment_method', 'Payment method'),
              },
              {
                type: 'software_provider',
                title: translate(translations, 'software_provider', 'Software Provider'),
              },
              { type: 'page', title: translate(translations, 'default_pages', 'Default') },
            ],
            includeOptions: {
              desktop_num_of_columns: '3',
              mobile_num_of_columns: '1',
              tablet_num_of_columns: '3',
            },
          },
          tabs: true,
          tabsOptions: { showAll: translate(translations, 'all', 'All'), tabsAlign: 'left' },
          sort: [
            {
              name: translate(translations, 'most_relevant', 'Most Relevant'),
              field: 'id',
              type: 'number',
            },
            {
              name: translate(translations, 'latest', 'Latest'),
              field: 'created_at',
              type: 'date',
            },
            {
              name: translate(translations, 'by_title', 'By Title'),
              field: 'title',
              type: 'string',
            },
          ],
          loadMore: {
            label: translate(translations, '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 = {
  page: PropTypes.shape({
    template: PropTypes.string,
    path: PropTypes.string,
    updated_at: PropTypes.string,
    created_at: PropTypes.string,
    author: PropTypes.shape({
      name: PropTypes.string,
    }),
    translations: PropTypes.object,
  }),
};

export default SearchContent;
