import Filter from '../Filter';
import FieldsGroup from '../../FieldsGroup';
import {invert} from 'lodash';
import {addToCategories, mapNameAndIdToOptions, mapToOptions} from '../../helpers/LoadersHelpers';

export default class InCategories extends Filter {
    static TYPE = window.CouponsPlus?.components?.filters?.InCategories.type;

    getComponent() {
        return window.CouponsPlus.components.conditions.InCategories;
    }

    getTitle() {
        return window.CouponsPlus?.components?.filters?.InCategories.name;
    }

    getIcon() {
        return (
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                      d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
            </svg>
        );
    }

    getFields() {
        return [
            new FieldsGroup([
                {
                    type: 'select',
                    width: 'auto',
                    options: window.CouponsPlus?.components?.filters?.InCategories.fields.inclusionType.meta['_allowed'],
                    labels: {},
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.inclusionType',
                    getValue: () => {
                        return invert(CouponsPlus?.components?.filters?.InCategories.fields.inclusionType.meta['_allowed'])[this.data.options.inclusionType]
                    },
                },
                {
                    type: 'multiple',
                    subtype: 'multiple',
                    width: 'min-w-48 max-w-70',
                    isAsync: !CouponsPlus.dashboardPreferences.shouldPreload.categories,
                    isMultiple: true,
                    placeholder: __('Search categories...', window.CouponsPlus.textDomain),
                    noOptionsMessage: () => __('Enter the name of a category...', window.CouponsPlus.textDomain),
                    //defaultOptions: mapNameAndIdToOptions(CouponsPlus.categories),
                    options: window.CouponsPlus.dashboardPreferences.shouldPreload.categories ? mapNameAndIdToOptions(CouponsPlus.categories) : (value => new Promise((resolve, reject) => {
                        $.ajax({
                            url: window.CouponsPlus.urls.rest.products.categories,
                            data: {
                                search: value
                            },
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader('X-WP-Nonce', window.CouponsPlus.security.nonces.rest);
                            },
                            success: (response) => {
                                Promise.all([
                                    new Promise(() => {
                                        addToCategories(response);
                                    }),
                                    new Promise(() => {
                                        resolve(mapNameAndIdToOptions(response))
                                    }),
                                ])
                            },
                            method: 'GET',
                        })
                    })),
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.expectedValues',
                    getValue: () => {
                        return this.data.options.expectedValues.map(
                            id => (
                                {
                                    value: id,
                                    label: window.CouponsPlus.categories.find(category => category.id === id).name
                                }
                            )
                        )
                    },
                    show: () => true
                },
                /*{
                    type: 'multiple',
                    subtype: 'multiple',
                    width: '',
                    options:window.CouponsPlus.categories.map(({id, name}) => ({value: id, label: name})),
                    labels: {
                        //top:window.CouponsPlus.components.conditions.CheckoutField.fields.name.meta.name
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.expectedValues',
                    getValue: () => {
                        return this.data.options.expectedValues.map(
                            id => ()
{
                                    value: id, 
                                    label:window.CouponsPlus.categories.find(category => category.id === id).name
                                }
                            )
                        )
                    },
                    show: () => true
                },*/
            ]),
        ]
    }

    getDefaultOptions() {
        return window.CouponsPlus?.components?.filters?.InCategories.defaultOptions;
    }
}