/* eslint-disable import/no-extraneous-dependencies, no-console */
import React from 'react';
import { render } from 'react-dom';
import { I18n } from '@procore/core-react';
import CoreUtils from '@procore/core-utils';
import Filters, { FILTERS_ANALYTICS } from '../src';
import sandboxStyles from './sandbox.scss';
import data from './data';

console.info('FILTERS_ANALYTICS enum:', FILTERS_ANALYTICS);
const onAnalytics = (obj) => { console.warn('Analytics: ', obj); };

const onFetch = (filter, callback) => {
  setTimeout(callback.bind(null, data[filter.endpoint]), 500);
};

const onRemoveFilter = (key) => { console.log('On remove filter:', key); };

const onSave = (items, options) => { console.log('Saving:', items, options); };

const savedFilters = {
  date_picker_with_pre_menu: ['2017-10-01T07:00:00Z', '2017-10-10T07:00:00Z'],
  flying_dogs: null,
  herding_dogs: [8474928, 9506467],
  some_date: ['2017-09-05T07:00:00Z', '2017-09-20T07:00:00Z'],
  location: ['1'],
  dogs: [101, 200, 201, 202]
};

const Custom = ({ calendar }) => {
  const withProps = {
    ...calendar,
    isRangeToggleVisible: true,
    isRange: true,
    footer: <div>Footer Element</div>,
    defaultSelectedDates: ['2018-09-05T07:00:00Z', '2018-09-20T07:00:00Z']
  };
  return (
    <Filters.FilterCalendar {...withProps} />
  );
};

const availableFilters = [
  {
    endpoint: '/filterA',
    key: 'mountain_dogs',
    value: 'Mountain Dogs'
  },
  {
    endpoint: '/filterB',
    key: 'scent_hounds',
    value: 'Scent Hounds'
  },
  {
    endpoint: '/filterC',
    key: 'guard_dogs',
    value: 'Guard Dogs'
  },
  {
    endpoint: '/filterD',
    key: 'poodles',
    value: 'Poodles'
  },
  {
    endpoint: '/filterE',
    key: 'retrievers',
    value: 'Retrievers'
  },
  {
    endpoint: '/filterF',
    key: 'herding_dogs',
    value: 'Herding Dogs'
  },
  {
    endpoint: '/filterG',
    key: 'spaniels',
    value: 'Spaniels'
  },
  {
    endpoint: '/filterH',
    key: 'flying_dogs',
    value: 'Flying Dogs'
  },
  {
    endpoint: '/filterI',
    key: 'mean_dogs',
    value: "Mean Dogs that use words like !@#$%^&*()~`.,/'[]{}|-_=+?>< "
  },
  {
    endpoint: '',
    key: 'some_date',
    value: 'Some date',
    type: 'calendar'
  },
  {
    endpoint: '',
    key: 'another_date',
    value: 'Another Date',
    type: 'calendar'
  },
  {
    endpoint: '',
    key: 'date_picker_with_pre_menu',
    value: 'Date picker with pre-menu',
    type: 'calendarWithPreMenu',
    type_options: {
      preMenu: [
        {
          key: 'noDueDate',
          value: 'No Due Date'
        },
        {
          key: 'overdue',
          value: 'Overdue'
        },
        {
          key: 'calendar',
          type: 'calendar',
          value: 'Select Day or Range'
        }
      ]
    }
  },
  {
    endpoint: '',
    key: 'a_date_with_a_custom_component',
    value: 'A date with a custom components',
    type: 'calendar',
    Component: Custom
  },
  {
    endpoint: '/filterK',
    key: 'manyfilteritems',
    value: 'Many Filter Items'
  },
  {
    endpoint: '/filterL',
    key: 'location',
    value: 'Location',
    type: 'location'
  },
  {
    endpoint: '/filterM',
    key: 'dogs',
    value: 'Dogs (Category Checkbox)',
    type: 'categoryCheckbox'
  }
];

const i18nMock = new CoreUtils.I18n.Mock({
  locale: 'en',
  translations: {
    en: {
      'views.global.add_filter': 'Add Filter',
      'views.global.single_day': 'Single Day',
      'views.global.date_range': 'Date Range',
      'views.global.no_items': 'No Items',
      'views.global.select_results': 'Select Results',
      'views.global.select_all': 'Select All',
      'views.global.search': 'Search',
      'views.global.clear_all': 'Clear All'
    }
  }
});

const Sandbox = () => (
  <I18n.Provider I18n={i18nMock}>
    <Filters
      {...{
        availableFilters,
        disabled: false,
        onAnalytics,
        onFetch,
        onRemoveFilter,
        onSave,
        isIncludeSublocations: true,
        savedFilters,
        stylesheets: [sandboxStyles]
      }}
    />
  </I18n.Provider>
);

render(<Sandbox />, window.document.getElementById('root'));