import React, { Component } from 'react';
import ContextsGroup from '../../ContextsGroup';
import { Dialog } from '@headlessui/react';
import { CouponsPlus, __ } from '../../globals';

export default class TieredOffersColumn extends Component {
    static structure = {};
    static TYPE = window.CouponsPlus.components.columns.TieredOffers.type;

    state = {
        executionModeChangePopupisOpened: true
    }

    popupContainerRef = React.createRef();

    static getMeta() {
        return window.CouponsPlus.components.columns.TieredOffers.meta;
    }

    componentDidMount() {
        if (this.state.executionModeChangePopupisOpened) {
            this.popupContainerRef?.current?.scrollTop(0, 0)
        }
    }

    render() {
        return <>
            {false && this.executionModeChangePopup()}
            <ContextsGroup
                columnNumber={this.props.columnNumber}
                hasMoreColumnsToTheRight={this.props.hasMoreColumnsToTheRight}
                isTheFirstColumn={this.props.isTheFirstColumn}
                contextComponents={this.props.getContextComponents({
                    disableMarginRight: true
                })}
                columnData={this.props.columnData}
                individualContextSelector={true}
                afterGroup={() => (
                    <div className="w-full text-gray-500 flex flex-row justify-between items-center">
                        <div className="w-full h-px border-t-2 border-dashed border-gray-500"></div>
                        <span className="flex text-gray-150 leading-5 px-2 rounded-3 bg-gray-500">{__('OR', window.CouponsPlus.textDomain)}</span>
                        <div className="w-full h-px border-t-2 border-dashed border-gray-500"></div>
                    </div>
                )}
            />
        </>
    }

    executionModeChangePopup() {
        const close = () => this.setState({ executionModeChangePopupisOpened: false })
        return <Dialog open={this.state.executionModeChangePopupisOpened}
            onClose={close}
            className="cp-dialog-root fixed top-0 left-0 w-screen h-screen z-[1000000000] flex items-center justify-center bg-gray-100 bg-opacity-80"
            onMouseDownCapture={event => {
                if (event.target.classList.contains('cp-dialog-root')) {
                    close()
                }
            }}
        >
            <Dialog.Overlay />

            <div className="p-10 bg-white rounded-2 flex flex-col items-center space-y-7 max-h-[90%] overflow-scroll" ref={this.popupContainerRef}>
                <div className="flex flex-col flex-shrink-0 items-left text-left space-y-3 max-w-140">
                    <Dialog.Title>
                        <h1 className="text-3x font-bold text-gray-700 text-center"><span>{TieredOffersColumn.getMeta().name}:</span> {__('Execution order changed!')}</h1>
                    </Dialog.Title>
                    <div className="space-y-2">
                        <Dialog.Description className="text-gray-450">
                            {__('The execution order of the * column has changed on -new- coupons. By default, now contexts that use filters are executed from bottom-to-top, this solves the problem of having to add the highest amounts first on previous versions. You can now start from lowest to highest amount (filters) and it will work as expected.').replace('*', TieredOffersColumn.getMeta().name)}
                        </Dialog.Description>
                        <Dialog.Description className="text-gray-450">
                            {__('This change only applies to filters. Conditions did not have this limitation and as a result they remain unchanged.').replace('*', TieredOffersColumn.getMeta().name)}
                        </Dialog.Description>
                    </div>
                    <p className="flex items-center space-x-2 bg-gray-200 text-gray-750 rounded-4 py-1 px-3 leading-4">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="min-w-4 max-w-4 min-h-4 max-h-4">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                        </svg>
                        <span>{__('This change only applies to new coupons. Old coupons that have * columns remain unchanged.').replace('*', TieredOffersColumn.getMeta().name)}</span>
                    </p>
                </div>
                <div className="flex space-x-10 flex-shrink-0">
                    <div className="space-y-3">
                        <div className="space-y-1">
                            <h1 className="text-2x to-gray-700">{__('Before (Coupons+ 2.2.2 and lower)')}</h1>
                            <p className="to-gray-500">{__('Executed from top to bottom.')}</p>
                        </div>
                        <img src={`${CouponsPlus.urls.storage}/dashboard/old-tieredcolumn.png`}
                            alt={__('Old tiered column')}
                            className="rounded-2 max-h-110"
                        />
                    </div>
                    <div className="space-y-3">
                        <div className="space-y-1">
                            <h1 className="text-2x to-gray-700">{__('After (Coupons+ 3 and higher)')}</h1>
                            <p className="to-gray-500">{__('Executed from bottom to top.')}</p>
                        </div>
                        <img src={`${CouponsPlus.urls.storage}/dashboard/new-tieredcolumn.png`}
                            alt={__('New tiered column')}
                            className="rounded-2 max-h-110"
                        />
                    </div>
                </div>
                <button className="flex flex-row flex-shrink-0 space-x-1 items-center justify-center bg-blue-normal text-gray-100 px-12 h-8 rounded-1" onClick={close}>{__('Got it')}</button>
            </div>
        </Dialog>
    }
}

//export default connect(TieredOffersColumn.mapStateToProps, {})(TieredOffersColumn);