import Ember from 'ember';
import layout from './template';
 
import config from 'ember-get-config';
import { task } from 'ember-concurrency';
 
import Analytics from '../../mixins/analytics';
import hostAppName from '../../mixins/host-app-name';
 
/**
 * @module ember-osf
 * @submodule components
 */
 
/**
 *  Discover-page component. Builds a search interface utilizing SHARE.
 *  See retraction-watch, registries, and preprints discover pages for working examples.
 *
 *  Majority adapted from Ember-SHARE https://github.com/CenterForOpenScience/ember-share, with additions from PREPRINTS
 *  and REGISTRIES discover pages. Original Ember-SHARE facets and PREPRINTS/REGISTRIES facets behave differently at this time.
 *  You can build a discover-page that uses Ember-SHARE type facets -OR- PREPRINTS/REGISTRIES type facets.  Would not recommend
 *  mixing until code is combined.
 *
 *  How to Use:
 *  Pass in custom text like searchPlaceholder.  The facets property will enable you to customize the filters
 *  on the left-hand side of the discover page. Sort options are the sort dropdown options. Each query parameter must be passed in individually,
 *  so they are reflected in the URL.  Logo and custom colors must be placed in the consuming application's stylesheet. Individual components
 *  can additionally be overridden in your application.
 *
 * Sample usage:
 * ```handlebars
 *{{discover-page
 *    consumingService=consumingService
 *    searchPlaceholder=searchPlaceholder
 *    detailRoute=detailRoute
 *    discoverHeader=discoverHeader
 *    themeProvider=themeProvider
 *
 *    sortOptions=sortOptions
 *    filterReplace=filterReplace
 *    whiteListedProviders=whiteListedProviders
 *    fetchedProviders=externalProviders
 *
 *    facets=facets
 *    results=results
 *    numberOfResults=numberOfResults
 *    aggregations=aggregations
 *    queryParamsState=queryParamsState
 *
 *    showActiveFilters=showActiveFilters
 *    loading=fetchData.isRunning
 *
 *    clearFilters=(action 'clearFilters')
 *    search=(action 'search')
 *
 *    size=size
 *    page=page
 *    q=q
 *    sort=sort
 * }}
 * {{!-- plus any query params (e.g. provider=provider) --}}
 * ```
 * @class discover-page
 */
 
const MAX_SOURCES = 500;
 
export default Ember.Component.extend(Analytics, hostAppName, {
    layout,
    currentUser: Ember.inject.service('current-user'),
    theme: Ember.inject.service(),
    i18n: Ember.inject.service(),
 
    classNames: ['discover-page'],
 
    // ************************************************************
    // PROPERTIES
    // ************************************************************
 
    /**
     * Size query parameter.  If "size" is one of your query params, it must be passed to the component so it can be updated.
     * @property {Integer} size
     * @default 10
     */
    size: 10,
 
    /**
     * Sort query parameter.  If "sort" is one of your query params, it must be passed to the component so it can be updated.
     * @property {String} sort
     * @default ''
     */
    sort: '',
 
    /**
     * Page query parameter.  If "page" is one of your query params, it must be passed to the component so it can be updated.
     * @property {Integer} page
     * @default 1
     */
    page: 1,
 
    /**
     * q query parameter.  If "q" is one of your query params, it must be passed to the component so it can be updated.
     * @property {String} q
     * @default ''
     */
    q: '',
 
    /**
     * Name of detail route for consuming application, like "content" or "detail". Override if search result title should link to detail route.
     * @property {String} detailRoute
     */
    detailRoute: null,
 
    /**
     * Text header for top of discover page.
     * @property {String} discoverHeader
     */
    discoverHeader: null,
 
 
    /**
     * For PREPRINTS ONLY.  Pass in the providers fetched in preprints app so they can be used in the provider carousel
     * @property {Object} fetchedProviders
     */
    fetchedProviders: null,
 
    /**
     * For PREPRINTS and REGISTRIES. A mapping of filter names for front-end display. Ex. {OSF: 'OSF Preprints'}.
     * @property {Object} filterReplace
     */
    filterReplace: {},
 
    /**
     * For PREPRINTS and REGISTRIES.  Displays activeFilters box above search facets.
     * @property {boolean} showActiveFilters
     */
    showActiveFilters: false,
 
    showLuceneHelp: false,
 
    numberOfResults: 0,
    numberOfSources: 0,
 
    results: Ember.ArrayProxy.create({ content: [] }), // Results from SHARE query
 
    /**
     * Sort dropdown options - Array of dictionaries.  Each dictionary should have display and sortBy keys.
     * @property {Array} sortOptions
     * @default [{
        display: 'Relevance',
        sortBy: ''
       }]
     */
    sortOptions: [{
        display: 'Relevance',
        sortBy: ''
    }, {
        display: 'Date Updated (Desc)',
        sortBy: '-date_updated'
    }, {
        display: 'Date Updated (Asc)',
        sortBy: 'date_updated'
    }, {
        display: 'Ingest Date (Asc)',
        sortBy: 'date_created'
    }, {
        display: 'Ingest Date (Desc)',
        sortBy: '-date_created'
    }],
 
    /**
     * themeProvider
     * @property {Object} Preprint provider loaded from theme service. Should be passed from consuming service so it is loaded before SHARE is queried.
     * @default ''
     */
    themeProvider: null,
 
 
    // ************************************************************
    // COMPUTED PROPERTIES
    // ************************************************************
 
    domainRedirectProviders: Ember.computed(function() {
        let providerDomains = [];
        let providers = this.get('fetchedProviders');
        for (let providerVal of providers) {
            if (providerVal.get('domain') && providerVal.get('domainRedirectEnabled') === true) {
                providerDomains.push(providerVal.get('domain'));
            }
        }
        return providerDomains;
    }),
 
    clampedPages: Ember.computed('totalPages', 'size', function() {
        // requesting over 10000 will error due to elastic limitations
        // https://www.elastic.co/guide/en/elasticsearch/guide/current/pagination.html
        let maxPages = Math.ceil(10000 / this.get('size'));
        let totalPages = this.get('totalPages');
 
        return totalPages < maxPages ? totalPages : maxPages;
    }),
 
    totalPages: Ember.computed('numberOfResults', 'size', function() {
        // Total pages of search results
        return Math.ceil(this.get('numberOfResults') / this.get('size'));
    }),
 
    actions: {
        clearFilters() {
            this.get('metrics').trackEvent({
                category: 'button',
                action: 'click',
                label: 'Discover - Clear Filters',
            });
 
            this.get('clearFilters')();
        },
 
        search() {
            this.get('metrics').trackEvent({
                category: 'button',
                action: 'click',
                label: 'Discover - Search',
                extra: this.get('q'),
            });
 
            this.get('search')();
        },
 
        selectSortOption(option) {
            // Runs when sort option changed in dropdown
            this.get('metrics').trackEvent({
                category: 'dropdown',
                action: 'select',
                label: `Sort by: ${option || 'relevance'}`
            });
 
            this.set('sort', option);
        },
 
        selectPage(pageNumber) {
            // When paginating, sets page and scrolls to top of results.
            this.set('page', pageNumber);
            if (scroll) {
                this.scrollToResults();
            }
        },
 
        toggleShowLuceneHelp() {
            this.toggleProperty('showLuceneHelp');
        },
 
        updateFilters(filterType, item) {
            item = typeof item === 'object' ? item.text : item;
            const currentState = this.get(`queryParamsState.${filterType}.value`).slice(0);
            const hasItem = currentState.includes(item);
 
            if (hasItem) {
                this.set(filterType, currentState.filter(x => !item.includes(x)));
            } else {
                currentState.pushObject(item)
                this.set(filterType, currentState);
            }
 
            this.get('metrics').trackEvent({
                category: 'filter',
                action: hasItem ? 'remove' : 'add',
                label: `Discover - ${filterType} ${item}`
            });
        },
 
        updateParams(key, value) {
            this.set(key, value);
        },
    },
 
    // ************************************************************
    // Discover-page METHODS and HOOKS
    // ************************************************************
 
    scrollToResults() {
        // Scrolls to top of search results
        Ember.$('html, body').scrollTop(this.$('.results-top').position().top);
    },
 
    isTypeFacet(obj) {
        return obj.key === 'type';
    },
 
    getTypes: task(function* () {
        const response = yield Ember.$.ajax({
            url: `${config.OSF.shareApiUrl}/schema/creativework/hierarchy/`,
            crossDomain: true,
            type: 'GET',
            contentType: 'application/vnd.api+json',
        });
        if (response.data) {
            const types = response.data.CreativeWork ? response.data.CreativeWork.children : {};
            this.get('facets').find(this.isTypeFacet).data = this.transformTypes(types);
        }
    }),
 
    transformTypes(types) {
        const tmpTypes = types;
        if (typeof (tmpTypes) !== 'object') {
            return tmpTypes;
        }
 
        for (const key of Object.keys(tmpTypes)) {
            const lowKey = key.replace(/([A-Z])/g, ' $1').trim().toLowerCase();
            tmpTypes[lowKey] = this.transformTypes(tmpTypes[key]);
            if (key !== lowKey) {
                delete tmpTypes[key];
            }
        }
 
        return tmpTypes;
    },
 
    getCounts: task(function* () {
        const searchUrl = `${config.OSF.shareSearchUrl}?preference=${this.get('currentUser.sessionKey')}`;
        const queryBody = JSON.stringify({
            size: 0,
            aggregations: {
                sources: {
                    cardinality: {
                        field: 'sources',
                        precision_threshold: MAX_SOURCES,
                    },
                },
            },
        });
        const response = yield Ember.$.ajax({
            url: searchUrl,
            crossDomain: true,
            type: 'POST',
            contentType: 'application/json',
            data: queryBody,
        });
        this.setProperties({
            numberOfEvents: response.hits.total,
            numberOfSources: response.aggregations.sources.value,
        });
    }),
 
    init() {
        // Runs on initial render.
        this._super(...arguments);
        if (this.get('facets').find(this.isTypeFacet)) {
            this.get('getTypes').perform();
        }
        this.get('getCounts').perform();
    },
});