import React, {FC} from "react";
import {CustomAttributeOption, CustomVariation} from "./AttributeFields";
import {MultiSelect} from "../fields/MultiSelect";
import {__, CouponsPlus} from "../../globals";
import {MultiSelectSearch, SelectOption} from "../fields/MultiSelectSearch";
import {Tabs} from "../fields/tabs";
import {Button} from "./Button";

export type CustomVariationFieldProps = {
    customVariation: CustomVariation,
    onAttributeChange: (attributeIndex: number, attribute: CustomAttributeOption) => void,
    onNewAttribute: () => void,
    onRemoveAttribute: (attributeIndex: number) => void,
    canCreateNewAttribute: boolean
}

const attributeTypeOptions = [
    {id: 'allowed', label: __('Eligible'), value: __('Eligible')},
    {id: 'excluded', label: __('Not eligible'), value: __('Not eligible')},
    {id: 'any', label: __('Any'), value: __('Any')},
];

const plusSign = <div className={'w-full flex justify-center'}>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-4 min-h-4 max-w-4 max-h-4">
        <path fillRule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clipRule="evenodd" />
    </svg>
</div>

export const CustomVariationField: FC<CustomVariationFieldProps> = ({
                                                                        customVariation,
                                                                        onAttributeChange,
                                                                        onNewAttribute,
                                                                        onRemoveAttribute,
                                                                        canCreateNewAttribute
                                                                    }) => {
    return <div className="relative flex flex-col items-start space-y-3 p-3 border-px border-gray-200 rounded-1 w-full max-w-full whitespace-nowrap flex-nowrap overflow-x-auto">
        {customVariation.map((attribute, index) => {
            const attributeOptions = CouponsPlus.attributes.map(option => ({...option, label: option.name, value: option.id})).filter(({id}) => {
                return true
            })
            const attributeMeta = CouponsPlus.attributes.find(attr => attr.id === attribute.attribute.id);
            const attributeValueOptions = attributeMeta?.values?.map?.(value => ({
                ...value,
                value: value.id,
                label: value.name,
            } as SelectOption));
            const isLastAttribute = index === customVariation.length - 1;

            return <><div key={attribute.attribute.id} className="flex flex-row items-start space-x-2 w-full">
                <MultiSelectSearch size={'small'}
                                   style={'transparent-gray'}
                                   options={attributeOptions}
                                   selectedValue={attribute.attribute.id}
                                   onSelectedValue={({id}) => {
                                       onAttributeChange(index, {
                                           ...attribute,
                                           attribute: {
                                               ...attribute.attribute,
                                               id
                                           }
                                       });
                                   }}
                />
                <div className="space-y-1 flex flex-col items-start w-full">
                    <div className="space-y-1 w-full">
                        <div className="w-full flex justify-between">
                            <Tabs size={'extra-small'}
                                  direction={attribute.type === 'any' ? 'horizontal' : 'horizontal'}
                                  tabs={attributeTypeOptions}
                                  xwidth={'auto'}
                                  dimUnselected
                                  onTabSelect={(id) => {
                                      onAttributeChange(index, {
                                          ...attribute,
                                          type: id as CustomAttributeOption['type']

                                      });
                                  }}
                                  selectedTabId={attribute.type}
                            />
                            <button onClick={() => onRemoveAttribute(index)}>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-4 min-h-4 max-w-4 max-h-4">
                                    <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clipRule="evenodd" />
                                </svg>
                            </button>
                        </div>
                        {attribute.type === 'any' && <p className="text-smaller-1 text-gray-350">{__('May have any *, but it needs to have a *.').replaceAll('*', attributeMeta?.name)}</p>}
                    </div>
                    {attribute.type !== 'any' && <MultiSelect options={attributeValueOptions}
                                  value={attribute.attribute.values}
                                  onSelectedValue={({id}) => {
                                      onAttributeChange(index, {
                                          ...attribute,
                                          attribute: {
                                              ...attribute.attribute,
                                              values: [
                                                  ...attribute.attribute.values,
                                                  id
                                              ]
                                          }
                                      })
                                  }}
                                  onRemovedValue={({id}) => {
                                      onAttributeChange(index, {
                                          ...attribute,
                                          attribute: {
                                              ...attribute.attribute,
                                              values: attribute.attribute.values.filter(valueId => valueId !== id)
                                          }
                                      })
                                  }}
                                  stateFirst
                                  SelectStateProps={{
                                      showDefaultEmptyState: false
                                  }}
                                  SelectSearchProps={{
                                      size: 'small',
                                      openMenuOnClick: true,
                                      showMode: 'always'//'focus-only'
                                  }}
                    />}
                </div>
            </div>
            {!isLastAttribute && plusSign}
            </>
        })}
        <p className="text-smaller-2 text-gray-350 leading-3">{__('The item (product) may have other attributes. This variation only ensures the attributes above match.')}</p>
        {plusSign}
        {canCreateNewAttribute && <Button preset={'gray'} size={'extra-small'} onClick={onNewAttribute}>
            {__('Add attribute')}
        </Button>}
    </div>
}