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 {CustomFieldComputedValue} from "./CustomField";
import {FieldType} from "../../fields";
import {TabFieldProps} from "../../fields/TabField";
import {TabsProps} from "../../fields/tabs";
import {CalendarProps} from "../../fields/Calendar";
import {TimeFieldProps} from "../../fields/TimeField";
import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat";

dayjs.extend(localizedFormat)

export type DateOptions = {
    'type' : 'exact' | 'range',
    'date' : {
        'exact': string, // hour is ignored
        'from': string, // hours are considered!
        'to': string  // hours are considered!
    },
    // only used when type is 'exact', because range already supports hours
    'exactHours' : {
        enabled: 'yes' | 'no',
        'from' : string, // hours!
        'to' : string // hours!
    }
}
const type = CouponsPlus?.components?.conditions?.Date?.type || 'Date'
export const DateMeta: 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="M12 11.993a.75.75 0 0 0-.75.75v.006c0 .414.336.75.75.75h.006a.75.75 0 0 0 .75-.75v-.006a.75.75 0 0 0-.75-.75H12ZM12 16.494a.75.75 0 0 0-.75.75v.005c0 .414.335.75.75.75h.005a.75.75 0 0 0 .75-.75v-.005a.75.75 0 0 0-.75-.75H12ZM8.999 17.244a.75.75 0 0 1 .75-.75h.006a.75.75 0 0 1 .75.75v.006a.75.75 0 0 1-.75.75h-.006a.75.75 0 0 1-.75-.75v-.006ZM7.499 16.494a.75.75 0 0 0-.75.75v.005c0 .414.336.75.75.75h.005a.75.75 0 0 0 .75-.75v-.005a.75.75 0 0 0-.75-.75H7.5ZM13.499 14.997a.75.75 0 0 1 .75-.75h.006a.75.75 0 0 1 .75.75v.005a.75.75 0 0 1-.75.75h-.006a.75.75 0 0 1-.75-.75v-.005ZM14.25 16.494a.75.75 0 0 0-.75.75v.006c0 .414.335.75.75.75h.005a.75.75 0 0 0 .75-.75v-.006a.75.75 0 0 0-.75-.75h-.005ZM15.75 14.995a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 .75.75v.006a.75.75 0 0 1-.75.75H16.5a.75.75 0 0 1-.75-.75v-.006ZM13.498 12.743a.75.75 0 0 1 .75-.75h2.25a.75.75 0 1 1 0 1.5h-2.25a.75.75 0 0 1-.75-.75ZM6.748 14.993a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z" />
                <path fillRule="evenodd" d="M18 2.993a.75.75 0 0 0-1.5 0v1.5h-9V2.994a.75.75 0 1 0-1.5 0v1.497h-.752a3 3 0 0 0-3 3v11.252a3 3 0 0 0 3 3h13.5a3 3 0 0 0 3-3V7.492a3 3 0 0 0-3-3H18V2.993ZM3.748 18.743v-7.5a1.5 1.5 0 0 1 1.5-1.5h13.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-13.5a1.5 1.5 0 0 1-1.5-1.5Z" clipRule="evenodd" />
            </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="M6.75 2.994v2.25m10.5-2.25v2.25m-14.252 13.5V7.491a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v11.251m-18 0a2.25 2.25 0 0 0 2.25 2.25h13.5a2.25 2.25 0 0 0 2.25-2.25m-18 0v-7.5a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v7.5m-6.75-6h2.25m-9 2.25h4.5m.002-2.25h.005v.006H12v-.006Zm-.001 4.5h.006v.006h-.006v-.005Zm-2.25.001h.005v.006H9.75v-.006Zm-2.25 0h.005v.005h-.006v-.005Zm6.75-2.247h.005v.005h-.005v-.005Zm0 2.247h.006v.006h-.006v-.006Zm2.25-2.248h.006V15H16.5v-.005Z" />
        </svg>
    }),
    // @ts-ignore
    fieldsMap: ({options: {type, exactHours}}: {options: DateOptions}) => [
        [ {id: 'type', renderType: FieldType.Tab}, ],
        ...type === 'exact' ? ([
            [ {id: 'date.exact', renderType: FieldType.Date}  ],
            [
                {
                    id: 'exactHours.enabled',
                    renderType: FieldType.Tab,
                    fieldProps: {
                        size: 'extra-small',
                        dimUnselected: true,
                        width: 'auto'
                    } as TabsProps,
                    fieldOptions: {
                        centered: true
                    }
                }
            ],
            exactHours.enabled === 'yes' && [ {
                    id: 'exactHours.from',
                    renderType: FieldType.Time,
                    wrap: (fieldToRender) => <div className="flex items-center justify-center space-x-2 w-full">
                        <div className="text-base text-gray-450 w-auto shrink-0">{__('From')}</div>
                        <div className="w-auto shrink-0">{fieldToRender}</div>
                    </div>
                }
            ],
            exactHours.enabled === 'yes' && [ {
                    id: 'exactHours.to',
                    renderType: FieldType.Time,
                    wrap: (fieldToRender) => <div className="flex items-center justify-center space-x-2 w-full">
                        <div className="text-base text-gray-450 w-auto shrink-0">{__('To')}</div>
                        <div className="w-auto shrink-0">{fieldToRender}</div>
                    </div>
                }
            ],
        ].filter(Boolean)) : [],
        type === 'range' && [
            [
                {id: 'date.from', renderType: FieldType.Date, fieldProps: {size: 'small'} as CalendarProps, title: __('Start Date')},
                {id: 'date.from', renderType: FieldType.Time, fieldOptions: {isFullDate: true}, fieldProps: {narrow: true} as Partial<TimeFieldProps>},
            ],
            [
                {id: 'date.to', renderType: FieldType.Date, fieldProps: {size: 'small'} as CalendarProps, title: __('End Date')},
                {id: 'date.to', renderType: FieldType.Time, fieldOptions: {isFullDate: true}, fieldProps: {narrow: true} as Partial<TimeFieldProps>},
            ],
        ],
    ]
}

export const DateRenderer: CardRenderer<DateOptions> = {
    type,
    icon: DateMeta.icon!,
    prefix: '*',
    example: __('May 5 (all day), From June 10 2P.M to June 12 10P.M'),
    AboveComputedValue: usingTestableOptions<DateOptions>(({type}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        if (type === 'range') {
            // dont show the title since we will show a title for each date
            return false
        }

        return undefined;
    }),
    ComputedValue: usingTestableOptions<DateOptions>(({type, date, exactHours}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        const parseFormat = 'YYYY-MM-DD HH:mm';

        if (type === 'exact') {
            return `${dayjs(date.exact, parseFormat).format('ll')}${exactHours.enabled === 'yes' ? `, ${dayjs(exactHours.from, 'HH:mm').format('LT')} - ${dayjs(exactHours.to, 'HH:mm').format('LT')}` : ''}`;
        } else {
            // this is a range
            return <div className="grid grid-cols-[auto_auto] gap-x-2 gap-y-0">
                {[date.from, date.to].map((source, index) => <>
                    <span className="text-smaller-1 opacity-70">{index === 0? __('Start Date') : __('End Date')}</span>
                    <p>{dayjs(source, parseFormat).format('lll')}</p>
                </>)}
            </div>
        }
    }),
}