import classNames from "classnames";
import { CouponsPlus, __ } from "./globals";

const ContextPopup = ({attrs, passAttrs = false, conditionsOrFilters, numberOfColumns = 2, data, handleConditionOrFilterClick, testableType, width}) => {
    return <div className={classNames(
                'z-1000 px-4 sm:px-0',
                {
                    'w-[900px]': !width,
                    [width]: width
                }
            )} {...attrs}>
              <div className="overflow-hidden rounded-2 shadow-lg bg-gray-150">
                    <div className="flex flex-row space-x-1">
                        <div className={classNames({
                            'flex flex-col': true,
                            'w-full': testableType !== 'filters',
                            //'w-[33%]': testableType === 'filters'
                            'w-[100%]': testableType === 'filters'
                        })}>
                            <h1 className="text-2x text-gray-500 px-4 py-3">{testableType === 'filters'? __('Filters',window.CouponsPlus.textDomain):__('Conditions',window.CouponsPlus.textDomain)}</h1>
                            <div className={classNames(
                                'relative w-full h-full grid gap-4 bg-white p-4 max-h-[calc(100vh-172px)] overflow-auto',
                                {
                                    'grid-cols-1': numberOfColumns === 1,
                                    'grid-cols-2': numberOfColumns === 2,
                                    'grid-cols-3': numberOfColumns === 3
                                }
                            )}>
                                {(conditionsOrFilters.map(Condition => [new Condition({}), Condition]).filter(([condition]) => !condition.isHidden()).map(([condition, Condition]) => {
                                    const conditionCanBeUsed =    !data
                                                                   .conditionsOrFilters
                                                                   .find(conditionOrFilterData => {
                                                                        return conditionOrFilterData.type === Condition.TYPE;
                                                                   });
                                    return (
                                        <button
                                        key={Condition.TYPE}
                                        disabled={conditionCanBeUsed? false : true}
                                        onClick={handleConditionOrFilterClick.bind(this, condition)}
                                        className={classNames(
                                            "flex p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50 group rounded-3 border-px border-transparent hover:border-blue-normal transition",
                                            {
                                                'opacity-30': !conditionCanBeUsed,
                                                'items-start': testableType !== 'filters',
                                                'items-center': testableType === 'filters'
                                            }
                                        )}
                                      >
                                        <div className="flex items-center justify-center flex-shrink-0 rounded-3 w-10 h-10 bg-gray-300 text-white group-hover:bg-blue-normal">
                                            {condition.getIcon()}
                                        </div>
                                        <div className={classNames({
                                            'flex flex-col ml-2 items-start': true,
                                        })}>
                                          <p className={classNames({
                                            'text-left font-medium text-gray-900 group-hover:text-blue-normal': true,
                                            'text-base': testableType !== 'filters',
                                            '': testableType === 'filters'
                                          })}>
                                            {condition.getTitle()}
                                          </p>
                                          {condition.getDescription && condition.getDescription()? (
                                            <p className="text-sm text-gray-500 text-left">
                                                {condition.getDescription() || ''}
                                              </p>
                                          ) : ''}
                                          <div className="grid grid-cols-2 gap-1 mt-1">
                                              {condition.getUseCases().map(useCase => (
                                                <div className="flex flex-row space-x-1 items-start">
                                                    <div className="bg-gray-200 rounded-6 p-[2px]">
                                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="min-w-3 max-w-3 min-h-3 max-h-3">
                                                          <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5m0 9V18A2.25 2.25 0 0118 20.25h-1.5m-9 0H6A2.25 2.25 0 013.75 18v-1.5M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                        </svg>
                                                    </div>
                                                    <p className="text-smaller-2 text-gray-350 text-left leading-[13px]">{useCase}</p>
                                                </div>
                                              ))}
                                          </div>
                                        </div>
                                      </button>
                                    )
                                }))}
                            </div>
                        </div>
                        {false && testableType === 'filters'? (
                            <div className="flex flex-col w-[66%]">
                                <h1 className="text-2x text-gray-500 px-4 py-3">{testableType !== 'filters'? __('Filters',window.CouponsPlus.textDomain):__('Conditions',window.CouponsPlus.textDomain)}</h1>
                                <div className="relative w-full h-full grid gap-4 bg-white p-4 grid-cols-1">
                                    {(
                                        <div className="flex flex-col w-full px-9">
                                            <h1 className="flex flex-col text-gray-600 text-2x mb-3 space-y-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                                </svg>
                                                <span>{__('Select a Filter',window.CouponsPlus.textDomain)}</span>
                                            </h1>
                                            <div className="space-y-1">
                                                <p>{__('A column may only have conditions or filters but not both',window.CouponsPlus.textDomain)}</p>
                                                <p>{__('If you want to add a condition, create a new column to the right',window.CouponsPlus.textDomain)}</p>
                                            </div>
                                        </div>
                                    )}
                                </div>                                
                            </div>
                        ): ''}
                    </div>
                  <div className="p-4 bg-gray-50">
                    <a
                      href="https://couponspluspro.com/d/conditions-and-filters"
                      target="_blank"
                      className="flow-root px-2 py-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                    >
                      <span className="flex items-center">
                        <span className="text-sm font-medium text-gray-900">
                          {__('Documentation',window.CouponsPlus.textDomain)}
                        </span>
                      </span>
                      <span className="block text-sm text-gray-500">
                        {__('Read the guide on using conditions and filters to unlock the power of Coupons+', window.CouponsPlus.textDomain)}.
                      </span>
                    </a>
                  </div>
                </div>
            </div>;
}

export default ContextPopup;