import Offer from '../Offer';
import { invert, merge } from 'lodash';
import Currency from '../../Currency';
import FieldsGroup from '../../FieldsGroup';
import OfferFilters from '../../OfferFilters';
import Row from '../../Row';
import Column from '../../Column';
import Context from '../../Context';

export default class Discount extends Offer
{
    static TYPE =window.CouponsPlus.components.offers.Discount.type;
    hasComponentToTheRight = true;

    afterCreation() 
    {
        let column = '{}'

        //
        // Only do it when we are passing the source from the first time.
        // we might be passing an already parsed row object!
        //
        if (typeof this.data.options.customFilteredItemsColumn === 'string') {
            try {
                column = JSON.parse(this.data.options.customFilteredItemsColumn)
            } catch(exception) {
                console.log('Discount::afterCreation() exception:', exception)
            }

            const baseRowData = merge({}, Row.structure(), {
                type: 'offer–filters',
                columns: [
                    merge({}, Column.structure(), {
                      type: 'Simple',
                      testableType: 'filters',
                      contexts: [
                        merge({}, Context.structure(), {
                          conditionsOrFilters: [
                          ],
                          offers: [],
                        })
                      ],
                    })
                ]
            })

            this.data.options.customFilteredItemsColumn = merge({}, baseRowData, {
                type: 'offer–filters',
                columns: [
                    merge({}, Column.structure(), column)
                ]
            })
        }

    }

    getIconURL()  
    {
        return window.CouponsPlus.components.offers.Discount.iconURL;
    }

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

    getTitle() 
    {
        return window.CouponsPlus.components.offers.Discount.name;
    }

    getDescription() 
    {
        return window.CouponsPlus.components.offers.Discount.description;
    } 

    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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>);
    }

    getFields() 
    {
        return [
            new FieldsGroup([
                {
                    type: 'select',
                    width: 'auto',
                    options:window.CouponsPlus.components.offers.Discount.fields.type.meta['_allowed'],
                    labels: {
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.type',
                    getValue: () => {
                        return invert(CouponsPlus.components.offers.Discount.fields.type.meta['_allowed'])[this.data.options.type]
                    },
                },
                {
                    type: 'input',
                    subtype: 'number',
                    width: '',
                    labels: {
                        inside: {
                            left: this.data.options.type === 'amount' ? 
                                (<span>-<Currency /></span>) : 
                                ('-'),
                            right: this.data.options.type === 'percentage'?
                                ('%') : ''
                        }
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.amount',
                    getValue: () => {
                        return this.data.options.amount
                    },
                    show: () => true
                },
            ]),
            {
                type: 'select',
                width: 'auto',
                options:window.CouponsPlus.components.offers.Discount.fields.scope.meta['_allowed'],
                labels: {
                    top: __('Apply to:',window.CouponsPlus.textDomain)
                },
                temporaryID: this.data.temporaryID,
                propertyName: 'options.scope',
                getValue: () => {
                    return invert(CouponsPlus.components.offers.Discount.fields.scope.meta['_allowed'])[this.data.options.scope]
                },
            },
            new FieldsGroup([
                {
                    type: 'select',
                    width: 'auto',
                    options: {
                        [CouponsPlus.components.offers.Discount.fields.limit.isEnabled.meta['disabled']]: false,
                        [CouponsPlus.components.offers.Discount.fields.limit.isEnabled.meta['enabled']]: true,
                    },
                    labels: {
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.limit.isEnabled',
                    getValue: () => {
                        return this.data.options.limit.isEnabled ?window.CouponsPlus.components.offers.Discount.fields.limit.isEnabled.meta['enabled'] :window.CouponsPlus.components.offers.Discount.fields.limit.isEnabled.meta['disabled']
                    },
                    show: () => this.data.options.scope === 'filtereditems'
                },
                {
                    type: 'input',
                    subtype: 'number',
                    width: '',
                    labels: {
                        inside: {
                            right: __('items',window.CouponsPlus.textDomain)
                        }
                    },
                    temporaryID: this.data.temporaryID,
                    propertyName: 'options.limit.amount',
                    getValue: () => {
                        return this.data.options.limit.amount
                    },
                    show: () => this.data.options.scope === 'filtereditems' && this.data.options.limit.isEnabled
                },               
            ])
        ];
    }

    getExtraComponentToTheRight()
    {
        if (this.data.options.scope === 'customfiltereditems') {
            return <OfferFilters offerCard={this}/>
        }
    }

    getIconClasses() 
    {
        return 'w-full h-auto top-[16px]';
    }

    getDefaultOptions()
{
        return window.CouponsPlus.components.offers.Discount.defaultOptions;
    }
}