import React, {FC, useEffect, useState} from "react";
import {NotInCartNotification} from "./cards/BuyXGetY";
import {Text} from "./fields/Text";
import {__, CouponsPlus} from "../globals";
import field from "../Field";
import {FieldsGrid, GridField} from "./fields/FieldsGrid";
import {MultiSelectSearch} from "./fields/MultiSelectSearch";
import {mapLocalMetaFieldOptions} from "./cards/FieldHelpers";
import {BuyXGetXOptions} from "./cards/BuyXGetX";

export type BuyXGetYNotInCartNotificationConfigFieldsProps = {
    notification: NotInCartNotification,
    onDataModified: (notification: NotInCartNotification) => void
}

export const BuyXGetYNotInCartNotificationConfigFields: FC<BuyXGetYNotInCartNotificationConfigFieldsProps> = ({notification, onDataModified}) => {
    const [message, setMessage] = useState<NotInCartNotification['message']>(notification.message)
    const [buttonText, setButtonText] = useState<string>(notification.button.text)
    const [buttonURLType, setButtonURLType] = useState<string>(notification.button.url.type)
    const [buttonURLValue, setButtonURLValue] = useState<string>(notification.button.url.value)

    useEffect(() => {
        onDataModified({
            ...notification,
            message,
            button: {
                text: buttonText,
                url: {
                    type: buttonURLType,
                    value: buttonURLValue
                }
            }
        })
    }, [message, buttonText, buttonURLType, buttonURLValue])

    return <div className={'space-y-4 w-110 overflow-y-scroll'}>
        <div className="space-y-2">
            <h2 className="text-1x text-gray-750 ml-4">{__('Message')}</h2>
            <Text
                autoFocusOnUpdate={false}
                id={'message'}
                value={message}
                onChange={setMessage}
                type={'textarea'}
                placeholder={
                    // @ts-ignore
                    __(CouponsPlus.components.offers.BuyXGetY.fields.whenNotInCart.notification.message.meta._default)
                }
            />
        </div>
        <div className={'space-y-2'}>
            <h1 className="text-2x text-gray-750 ml-4">{__('Button')}</h1>
            <FieldsGrid fields={[
                {
                    title: __('Label'),
                    description: __('This is the text that will be shown on the button. It is meant to be a short call to action, like "select reward" or "browse gifts".'),
                    field: <Text
                        autoFocusOnUpdate={false}
                        id={'button.text'}
                        value={buttonText}
                        onChange={setButtonText}
                        type={'input'}
                        placeholder={
                            // @ts-ignore
                            __(CouponsPlus.components.offers.BuyXGetY.fields.whenNotInCart.notification.button.text.meta._default)
                        }
                    />
                },
                {
                    title: 'URL Type',
                    description: __("Shop: Will link to your site's shop page. URL: Select a custom URL."),
                    field: <MultiSelectSearch size={'small'}
                                              style={'normal'}
                                              options={mapLocalMetaFieldOptions(CouponsPlus.components.offers.BuyXGetY.fields.whenNotInCart.notification.button.url.type.meta._allowed)}
                                              selectedValue={buttonURLType}
                                              onSelectedValue={({id}) => {
                                                  setButtonURLType(id)
                                              }}

                    />
                },
                buttonURLType === 'url' && {
                    title: __('URL'),
                    description: __("The direct URL to send the customer after they've clicked the link."),
                    field: <Text
                        autoFocusOnUpdate={false}
                        id={'button.text'}
                        value={buttonURLValue}
                        onChange={setButtonURLValue}
                        type={'input'}
                        placeholder={
                            'https://example.com'
                        }
                    />
                }
            ].filter(v => v) as GridField[]} />
        </div>
    </div>;
}