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

/**
 * TODO: Remove duplication (= InCategories)
 */
export default class InTags extends Filter {
    static TYPE = window.CouponsPlus?.components?.filters?.InTags.type;

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

    getTitle() {
        return window.CouponsPlus?.components?.filters?.InTags.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 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
            </svg>
        );
    }

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

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