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

export default class GrouppedSubtotal extends Condition
{
    static TYPE =window?.CouponsPlus?.components?.conditions?.GrouppedSubtotal?.type;
    
    getComponent() 
    {
        return window.CouponsPlus.components.conditions.GrouppedSubtotal;       
    }

    getTitle() 
    {
        return window.CouponsPlus.components.conditions.GrouppedSubtotal.name;
    }

    getDescription() 
    {
        return window.CouponsPlus.components.conditions.GrouppedSubtotal.description;
    }
    
    getIcon()
{
        return (
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
            </svg>

        )
    }

    getFields() 
    {
        const categoriesOrTagsType = this.data.options.grouppedType

        const Group = categoriesOrTagsType === 'categories' ?window.CouponsPlus.categories :window.CouponsPlus.tags;

        return [
            new FieldsGroup([
                {
                    type: 'select',
                    width: 'auto',
                    options:window.CouponsPlus.components.conditions.GrouppedSubtotal.fields.amountOptions.quantity.type.meta['_allowed'],
                    labels: {
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.amountOptions.quantity.type',
                    getValue: () => {
                        return invert(CouponsPlus.components.conditions.GrouppedSubtotal.fields.amountOptions.quantity.type.meta['_allowed'])[this.data.options.amountOptions.quantity.type]
                    },
                },
                {
                    type: 'input',
                    subtype: 'number',
                    width: '',
                    labels: {
                        inside: {
                            left: <Currency />
                        }
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.amountOptions.quantity.amount',
                    getValue: () => {
                        return this.data.options.amountOptions.quantity.amount
                    },
                    show: () => this.data.options.amountOptions.quantity.type !== 'range'
                },
                {
                    type: 'input',
                    subtype: 'number',
                    width: '',
                    labels: {
                        left:window.CouponsPlus.components.conditions.GrouppedSubtotal.fields.amountOptions.quantity.range.minimum.meta.name,
                        inside: {
                            left: <Currency />
                        }
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.amountOptions.quantity.range.minimum',
                    getValue: () => {
                        return this.data.options.amountOptions.quantity.range.minimum
                    },
                    show: () => this.data.options.amountOptions.quantity.type === 'range'
                },
                {
                    type: 'input',
                    subtype: 'number',
                    width: '',
                    labels: {
                        left:window.CouponsPlus.components.conditions.GrouppedSubtotal.fields.amountOptions.quantity.range.maxmimum.meta.name,
                        inside: {
                            left: <Currency />
                        }
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.amountOptions.quantity.range.maxmimum',
                    getValue: () => {
                        return this.data.options.amountOptions.quantity.range.maxmimum
                    },
                    show: () => this.data.options.amountOptions.quantity.type === 'range'
                },
            ]),
            new FieldsGroup([
                {
                    type: 'select',
                    width: 'auto',
                    options:window.CouponsPlus.components.conditions.GrouppedSubtotal.fields.grouppedType.meta['_allowed'],
                    labels: {
                        left: 'in:'
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.grouppedType',
                    getValue: () => {
                        return invert(CouponsPlus.components.conditions.GrouppedSubtotal.fields.grouppedType.meta['_allowed'])[this.data.options.grouppedType]
                    },
                },
                {
                    type: 'multiple',
                    subtype: 'multiple',
                    width: 'min-w-48 max-w-70',
                    isAsync: !CouponsPlus.dashboardPreferences.shouldPreload[categoriesOrTagsType],
                    isMultiple: true,
                    placeholder: categoriesOrTagsType === 'categories'? __('Search categories...',window.CouponsPlus.textDomain) : __('Search tags...',window.CouponsPlus.textDomain),
                    noOptionsMessage: () => __('Enter the name of a category/tag...',window.CouponsPlus.textDomain),
                    //defaultOptions: mapNameAndIdToOptions(CouponsPlus.categories),
                    options:window.CouponsPlus.dashboardPreferences.shouldPreload[categoriesOrTagsType]? mapNameAndIdToOptions(CouponsPlus[categoriesOrTagsType]) :  (value => new Promise((resolve, reject) => {
                        $.ajax({
                            url:window.CouponsPlus.urls.rest.products[categoriesOrTagsType],
                            data: {
                                search: value
                            },
                            beforeSend: function ( xhr ) {
                                xhr.setRequestHeader( 'X-WP-Nonce',window.CouponsPlus.security.nonces.rest);
                            },
                            success: (response) => {
                                Promise.all([
                                    new Promise(() => {
                                        categoriesOrTagsType === 'categories' ? addToCategories(response) : addToTags(response);
                                    }),
                                    new Promise(() => {
                                        resolve(mapNameAndIdToOptions(response))
                                    }),
                                ])
                            },
                            method: 'GET',
                        })
                    })),
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.ids',
                    getValue: () => {
                        return this.data.options.ids.map(
                            id => (
                                {
                                    value: id, 
                                    label: CouponsPlus[categoriesOrTagsType].find(category => category.id === id).name
                                }
                            )
                        )
                    },
                    show: () => true
                },
                
            ]),
        ]
    }

    getDefaultOptions()
{
        return window?.CouponsPlus?.components?.conditions?.GrouppedSubtotal?.defaultOptions;
    }
}