import React, {FC} from "react";
import {Container} from "./Container";
import {__} from "../../globals";
import {Button} from "./Button";
import {TimeSlot, TimeSlotField, TimeSlotProps} from "./TimeSlotField";
import {EmulatedButton} from "../EmulatedButton";

export type WeeklyScheduleFieldsProps = {
    timeSlots: TimeSlot[],
    onNewTimeSlot: () => void,
    onTimeSlotChange: (index, timeSlot: TimeSlot) => void,
    onRemoveTimeSlot: (index: number) => void
}

export const WeeklyScheduleFields: FC<WeeklyScheduleFieldsProps> = ({
                                                                        timeSlots,
                                                                        onNewTimeSlot,
                                                                        onTimeSlotChange,
                                                                        onRemoveTimeSlot
                                                                    }) => {
    return <Container withBorder={false}>
        {timeSlots.length === 0 && <Container alignment={'center'}>
            <p className="text-center text-gray-400 py-10 px-6">{__('Add time slots to restrict this coupon based on the day and time of the week')}</p>
        </Container>}
        {timeSlots.map((timeSlot, index) =>
            <div className="flex flex-col gap-1 w-full" key={index}>
                <div className="flex items-center justify-between">
                    <span className="text-smaller-1 text-gray-400">{__('Time Slot')} #{index + 1}</span>
                    <EmulatedButton onClick={() => onRemoveTimeSlot(index)} className="active:scale-100 hover:scale-110 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                             className="min-w-6 min-h-6 max-w-6 max-h-6 text-gray-300">
                            <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>
                    </EmulatedButton>
                </div>
                <Container padding={/*undefined*/'p-0'} margin={'mt-0'}>
                    <div className="grid grid-cols-1 gap-x-2 gap-y-3 w-full">
                        <TimeSlotField
                            timeSlot={timeSlot}
                            onDaysChange={(days) => {
                                onTimeSlotChange(index, {
                                    ...timeSlot,
                                    days: [...days]
                                })
                            }}
                            onAddDay={(day) => {
                                onTimeSlotChange(index, {
                                    ...timeSlot,
                                    days: [...timeSlot.days, day]
                                })
                            }}
                            onRemoveDay={(day) => {
                                onTimeSlotChange(index, {
                                    ...timeSlot,
                                    days: timeSlot.days.filter(d => d !== day)
                                })
                            }}
                            onTimeTypeChange={(type) => {
                                onTimeSlotChange(index, {
                                    ...timeSlot,
                                    time: {
                                        ...timeSlot.time,
                                        type,
                                        // lets update the value from __local to prevent value corruption
                                        value: timeSlot.time.__local[type === 'range' ? 'value_range' : 'value_hours'] || []
                                    }
                                })
                            }}
                            onTimeValueChange={(timeValue) => {
                                onTimeSlotChange(index, {
                                    ...timeSlot,
                                    time: {
                                        ...timeSlot.time,
                                        value: timeValue,
                                        // update the __local value
                                        __local: {
                                            ...timeSlot.time.__local,
                                            [timeSlot.time.type === 'range' ? 'value_range' : 'value_hours']: timeValue
                                        } as Partial<TimeSlot>
                                    }
                                })
                            }}
                            autoOpenDaysPopupOnMount={timeSlot.time.__local?.open_days_popup_on_mount === true}
                            onAutoOpenDaysPopupHandled={() => {
                                if (timeSlot.time.__local?.open_days_popup_on_mount === true) {
                                    onTimeSlotChange(index, {
                                        ...timeSlot,
                                        time: {
                                            ...timeSlot.time,
                                            __local: {
                                                ...timeSlot.time.__local,
                                                open_days_popup_on_mount: false
                                            }
                                        }
                                    })
                                }
                            }}
                        />
                    </div>
                </Container>
            </div>)}
        <Button preset={'blue'} onClick={onNewTimeSlot}>
            {__('Add Time Slot')}
        </Button>
    </Container>
}