import {__, CouponsPlus} from "../../../globals"
import {ComponentMeta} from "../../ComponentsMeta"
import {iconWithClassName} from "../../IconWithClassName"
import {CardRenderer, CardRendererContext} from "../../CardRenderers";
import {usingTestableOptions} from "../CardHelpers"
import {ComponentCategory} from "../../components";
import {FieldType} from "../../fields";
import {MultiSelectProps} from "../../fields/MultiSelect";
import {SelectOption} from "../../fields/MultiSelectSearch";
import React from "react";
import {fieldsCacheContainer} from "../../FieldsCache";

export type HolidaysOptions = {
    holidays: string[], // countryCode:holidayCode eg: 'US:Thanksgiving', 'US:Christmas', 'UK:BoxingDay'
}


const type = CouponsPlus?.components?.conditions?.Holidays?.type || 'Holidays'
export type HolidayOption = {
    country_code: string//"HR",
    country_name: string//"Croatia",
    date: string//"2025-11-18",
    day_of_week: string//"Tuesday",
    formatted_date: string//"Tuesday, November 18, 2025",
    id: string//"remembranceDay"
    is_observed: boolean//false,
    is_official: boolean//true,
    name: string//"Remembrance Day for Homeland War Victims and Remembrance Day for the Victims of Vukovar and Skabrnja",
    short_name: string//"remembranceDay",
    timestamp: string//1763420400,
    type: string//"official",
}
export type CustomSelectHolidayOption = {
    type: 'holiday',
    option: HolidayOption
}
const CustomHolidaysFieldLabel = ({id, value: {option}}: { id: string, value: CustomSelectHolidayOption }) => {
    console.log('opt in', option)

    return <div>
        <p>{option.name} <span
            className="inline-flex px-2 py-0 bg-gray-150 text-gray-450 rounded-4">{option.country_name}</span></p>
        <p className="text-smaller-1 opacity-80 text-gray-450">{option.formatted_date}</p>
    </div>
};

export const HolidaysMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    category: ComponentCategory.Time,
    icon: iconWithClassName(({className, context}) => {
        if (context === 'card') {
            // solid
            return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
                <path
                    d="m15 1.784-.796.795a1.125 1.125 0 1 0 1.591 0L15 1.784ZM12 1.784l-.796.795a1.125 1.125 0 1 0 1.591 0L12 1.784ZM9 1.784l-.796.795a1.125 1.125 0 1 0 1.591 0L9 1.784ZM9.75 7.547c.498-.021.998-.035 1.5-.042V6.75a.75.75 0 0 1 1.5 0v.755c.502.007 1.002.021 1.5.042V6.75a.75.75 0 0 1 1.5 0v.88l.307.022c1.55.117 2.693 1.427 2.693 2.946v1.018a62.182 62.182 0 0 0-13.5 0v-1.018c0-1.519 1.143-2.829 2.693-2.946l.307-.022v-.88a.75.75 0 0 1 1.5 0v.797ZM12 12.75c-2.472 0-4.9.184-7.274.54-1.454.217-2.476 1.482-2.476 2.916v.384a4.104 4.104 0 0 1 2.585.364 2.605 2.605 0 0 0 2.33 0 4.104 4.104 0 0 1 3.67 0 2.605 2.605 0 0 0 2.33 0 4.104 4.104 0 0 1 3.67 0 2.605 2.605 0 0 0 2.33 0 4.104 4.104 0 0 1 2.585-.364v-.384c0-1.434-1.022-2.7-2.476-2.917A49.138 49.138 0 0 0 12 12.75ZM21.75 18.131a2.604 2.604 0 0 0-1.915.165 4.104 4.104 0 0 1-3.67 0 2.605 2.605 0 0 0-2.33 0 4.104 4.104 0 0 1-3.67 0 2.605 2.605 0 0 0-2.33 0 4.104 4.104 0 0 1-3.67 0 2.604 2.604 0 0 0-1.915-.165v2.494c0 1.035.84 1.875 1.875 1.875h15.75c1.035 0 1.875-.84 1.875-1.875v-2.494Z"/>
            </svg>
        }
        // outline
        return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                    stroke="currentColor" className="size-6">
            <path strokeLinecap="round" strokeLinejoin="round"
                  d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.871c1.355 0 2.697.056 4.024.166C17.155 8.51 18 9.473 18 10.608v2.513M15 8.25v-1.5m-6 1.5v-1.5m12 9.75-1.5.75a3.354 3.354 0 0 1-3 0 3.354 3.354 0 0 0-3 0 3.354 3.354 0 0 1-3 0 3.354 3.354 0 0 0-3 0 3.354 3.354 0 0 1-3 0L3 16.5m15-3.379a48.474 48.474 0 0 0-6-.371c-2.032 0-4.034.126-6 .371m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.169c0 .621-.504 1.125-1.125 1.125H4.125A1.125 1.125 0 0 1 3 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 0 1 6 13.12M12.265 3.11a.375.375 0 1 1-.53 0L12 2.845l.265.265Zm-3 0a.375.375 0 1 1-.53 0L9 2.845l.265.265Zm6 0a.375.375 0 1 1-.53 0L15 2.845l.265.265Z"/>
        </svg>
    }),
    fieldsMap: [
        [
            {
                id: 'holidays',
                renderType: FieldType.MultiSelect,
                fieldProps: {
                    SelectStateProps: {
                        defaultItemOptions: {
                            Label: CustomHolidaysFieldLabel
                        },
                        //showID: false
                    },
                    SelectSearchProps: {
                        placeholder: () => __('Search holidays like Christmas... or countries like Mex...'),
                        MultiSelectSearchItemProps: {
                            options: {
                                Label: CustomHolidaysFieldLabel
                            },
                            showID: false
                        },
                        customOptionValueResolver: (option) => ({
                            type: 'holiday',
                            option
                        }),
                    },
                } as MultiSelectProps<any>
            }
        ]
        // no it will have to be a custom field component because we're adding holidays from different countries
    ]
}
export const HolidaysRenderer: CardRenderer<HolidaysOptions> = {
    type,
    icon: HolidaysMeta.icon!,
    prefix: '*',
    example: __('Black Friday, Cyber Monday, Valentine\'s day , etc.'),
    AboveComputedValue: usingTestableOptions<HolidaysOptions>(({}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        return undefined
    }),
    ComputedValue: usingTestableOptions<HolidaysOptions>(({holidays}, {context}) => {
        const metaData = CouponsPlus.components.conditions[HolidaysMeta.id]

        return <div className="grid grid-cols-1 gap-0">
            {holidays.map((id) => {
                const selectedProductOption: SelectOption<CustomSelectHolidayOption> | undefined = fieldsCacheContainer.get('holidays').get(id) as SelectOption<CustomSelectHolidayOption> | undefined

                if (!selectedProductOption) {
                    return '?'
                }

                return <CustomHolidaysFieldLabel  {...selectedProductOption}/>
            })}
        </div>;
    }),
}
