import { Card, CardHeader, CardBody } from '../ui/wp-card';
import { TextareaControl } from "../ui/textarea-control";
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { Heading } from '../ui/heading';
import { Flex, FlexItem, FlexBlock } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { Controller, useFormContext } from 'react-hook-form';
import { IValueSet, useValueSetServiceContext } from '../../services';
import { PractitionerRoleAvailableTime } from 'fhir/r4';
import React from 'react';
// - WordPress's ToggleControl, swapped for the ui/* adapter. Same props, same JSX;
// only `__nextHasNoMarginBottom` is dropped, which means nothing outside WordPress.
import { ToggleControl } from '../ui/toggle-control';

interface FhirOperationalHoursProps {
    hours: any;
    label: string;
    context?: string;
    startKey?: string;
    endKey?: string;
    showAvailabilityExceptions?: boolean;
    submitting?: boolean;
}

const FhirOperationalHours = ({
                                  hours,
                                  label,
                                  context = 'availableTime',
                                  startKey = 'availableStartTime',
                                  endKey = 'availableEndTime',
                                  showAvailabilityExceptions = true,
                                  submitting = false
                              }: FhirOperationalHoursProps) => {
    const { control, watch } = useFormContext();
    const { daysOfWeek } = useValueSetServiceContext();
    const getDayOfWeekDisplay = (availableTime: PractitionerRoleAvailableTime): string => daysOfWeek.find((day: IValueSet) => day.code === availableTime.daysOfWeek?.[0])?.display ?? '';
    const spacerMargin = '24px';

    return (
        <>
            <Spacer margin="8"/>
            <Heading level={5}>{label}</Heading>
            <Divider margin="2"/>
            <Spacer margin="8"/>

            {hours.fields.map((availableTime: any, index: number) => {
                return (
                    <React.Fragment key={availableTime.id}>
                        <Card>
                            <CardHeader>
                                <Flex align="center" justify="space-between" style={{ width: '100%' }}>
                                    <FlexItem>
                                        <Heading level={4}>{getDayOfWeekDisplay(availableTime)}</Heading>
                                    </FlexItem>
                                    <FlexItem>
                                        <Controller key={`${context}.${index}.available`}
                                                    name={`${context}.${index}.available`}
                                                    control={control}
                                                    render={({ field }) => (
                                                        <ToggleControl 
                                                                       checked={field.value}
                                                                       onChange={field.onChange}
                                                                       label="Available"
                                                                       disabled={submitting}/>
                                                    )}/>
                                    </FlexItem>
                                </Flex>
                            </CardHeader>
                            <CardBody>
                                {watch(`${context}.${index}.available`) && (
                                    <>
                                        <Spacer margin={spacerMargin}/>

                                        {/* allDay */}
                                        <Controller key={`${context}.${index}.allDay`}
                                                    name={`${context}.${index}.allDay`}
                                                    control={control}
                                                    render={({ field }) => (
                                                        <ToggleControl 
                                                                       checked={field.value}
                                                                       onChange={field.onChange}
                                                                       label="Always available (e.g. 24 hour service)"
                                                                       disabled={submitting}/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

                                        {!watch(`${context}.${index}.allDay`) && (
                                            <Flex gap={8}>
                                                {/* start */}
                                                <FlexBlock>
                                                    <Controller key={`${context}.${index}.${startKey}`}
                                                                name={`${context}.${index}.${startKey}`}
                                                                control={control}
                                                                render={({ field }) => (
                                                                    <InputControl
                                                                                  label="Opening time of day"
                                                                                  value={field.value}
                                                                                  onChange={field.onChange}
                                                                                  type="time"/>
                                                                )}/>
                                                </FlexBlock>

                                                {/* end */}
                                                <FlexBlock>
                                                    <Controller key={`${context}.${index}.${endKey}`}
                                                                name={`${context}.${index}.${endKey}`}
                                                                control={control}
                                                                render={({ field }) => (
                                                                    <InputControl
                                                                                  label="Closing time of day"
                                                                                  value={field.value}
                                                                                  onChange={field.onChange}
                                                                                  type="time"/>
                                                                )}/>
                                                </FlexBlock>
                                            </Flex>
                                        )}
                                    </>
                                )}
                            </CardBody>
                        </Card>

                        <Spacer margin="32px"/>
                    </React.Fragment>
                );
            })}

            {/* availabilityExceptions */}
            {showAvailabilityExceptions && (
                <>
                    <Spacer margin="16"/>
                    <Heading level={5}>Availability Exceptions</Heading>
                    <Divider margin="2"/>
                    <Spacer margin="8"/>

                    <Controller key="availabilityExceptions"
                                name="availabilityExceptions"
                                control={control}
                                render={({ field }) => (
                                    <TextareaControl
                                                     style={{ width: '100%' }}
                                                     label=""
                                                     // The heading above is a heading, not a label, so
                                                     // the control has no accessible name without this.
                                                     aria-label="Availability Exceptions"
                                                     help="Description of availability exceptions"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     rows={5}
                                                     disabled={submitting}/>
                                )}/>
                </>
            )}
        </>
    );
};

export default FhirOperationalHours;

// import { Controller, useFormContext, useFieldArray } from 'react-hook-form';
// import { IValueSet, useValueSetServiceContext } from '../../services';
// import { PractitionerRoleAvailableTime } from 'fhir/r4';
// import React from 'react';
//
// interface FhirOperationalHoursProps {
// hours: any;
// label: string;
// context?: string;
// startKey?: string;
// endKey?: string;
// showAvailabilityExceptions?: boolean;
// submitting?: boolean;
// }
//
// interface TimeInterval {
// id: string;
// start: string;
// end: string;
// }
//
// const FhirOperationalHours = ({
// hours,
// label,
// context = 'availableTime',
// startKey = 'availableStartTime',
// endKey = 'availableEndTime',
// showAvailabilityExceptions = true,
// submitting = false
// }: FhirOperationalHoursProps) => {
// const { control, watch, setValue, getValues } = useFormContext();
// const { daysOfWeek } = useValueSetServiceContext();
// const getDayOfWeekDisplay = (availableTime: PractitionerRoleAvailableTime): string =>
// daysOfWeek.find((day: IValueSet) => day.code === availableTime.daysOfWeek?.[0])?.display ?? '';
//
// const spacerMargin = '24px';
//
// // Create a field array for each day's time intervals
// const timeIntervalsArrays = hours.fields.map((_: any, index: number) => {
// return useFieldArray({
// control,
// name: `${context}.${index}.timeIntervals`
// });
// });
//
// // Initialize time intervals if they don't exist
// React.useEffect(() => {
// hours.fields.forEach((availableTime: any, index: number) => {
// const timeIntervals = getValues(`${context}.${index}.timeIntervals`);
//
// if (!timeIntervals || timeIntervals.length === 0) {
// // Initialize with a single interval using the existing start/end times
// setValue(`${context}.${index}.timeIntervals`, [
// {
// start: getValues(`${context}.${index}.${startKey}`) || '09:00',
// end: getValues(`${context}.${index}.${endKey}`) || '17:00'
// }
// ]);
// }
// });
// }, [hours.fields, context, startKey, endKey, setValue, getValues]);
//
// // Add a new time interval for a specific day
// const addTimeInterval = (dayIndex: number) => {
// const timeIntervals = timeIntervalsArrays[dayIndex];
// timeIntervals.append({
// start: '09:00',
// end: '17:00'
// });
// };
//
// // Remove a time interval for a specific day
// const removeTimeInterval = (dayIndex: number, intervalIndex: number) => {
// const timeIntervals = timeIntervalsArrays[dayIndex];
// timeIntervals.remove(intervalIndex);
// };
//
// return (
// <>
// <Spacer margin="8"/>
// <Heading level={5}>{label}</Heading>
// <Divider margin="2"/>
// <Spacer margin="8"/>
//
// {hours.fields.map((availableTime: any, dayIndex: number) => {
// const dayAvailable = watch(`${context}.${dayIndex}.available`);
// const allDay = watch(`${context}.${dayIndex}.allDay`);
// const timeIntervals = timeIntervalsArrays[dayIndex];
//
// return (
// <React.Fragment key={availableTime.id}>
// <Card>
// <CardHeader>
// <Heading level={4}>{getDayOfWeekDisplay(availableTime)}</Heading>
// </CardHeader>
// <CardBody>
// <Spacer margin={spacerMargin}/>
//
// {/* available */}
// <Controller
// key={`${context}.${dayIndex}.available`}
// name={`${context}.${dayIndex}.available`}
// control={control}
// render={({ field }) => (
// <ToggleControl
//
// checked={field.value}
// onChange={field.onChange}
// label="Available"
// disabled={submitting}
// />
// )}
// />
//
// <Spacer margin={spacerMargin}/>
//
// {dayAvailable && (
// <>
// {/* allDay */}
// <Controller
// key={`${context}.${dayIndex}.allDay`}
// name={`${context}.${dayIndex}.allDay`}
// control={control}
// render={({ field }) => (
// <ToggleControl
//
// checked={field.value}
// onChange={field.onChange}
// label="Always available (e.g. 24 hour service)"
// disabled={submitting}
// />
// )}
// />
//
// <Spacer margin={spacerMargin}/>
//
// {!allDay && timeIntervals.fields.map((interval: any, intervalIndex: number) => (
// <div key={interval.id}>
// <Flex align="center" justify="space-between">
// <Heading level={5}>
// {intervalIndex === 0 ? 'Hours': `Additional Hours ${intervalIndex}`}
// </Heading>
//
// {intervalIndex > 0 && (
// <Button
// icon={trash}
// isDestructive
// onClick={() => removeTimeInterval(dayIndex, intervalIndex)}
// disabled={submitting}
// label="Remove time interval"
// showTooltip
// />
// )}
// </Flex>
//
// <Spacer margin="8px"/>
//
// <Flex gap={8}>
// {/* start */}
// <FlexBlock>
// <Controller
// key={`${context}.${dayIndex}.timeIntervals.${intervalIndex}.start`}
// name={`${context}.${dayIndex}.timeIntervals.${intervalIndex}.start`}
// control={control}
// render={({ field }) => (
// <InputControl
//
// label="Opening time"
// value={field.value}
// onChange={(value) => {
// field.onChange(value);
// // Update the main start time for the first interval
// if (intervalIndex === 0) {
// setValue(`${context}.${dayIndex}.${startKey}`, value);
// }
// }}
// type="time"
// disabled={submitting}
// />
// )}
// />
// </FlexBlock>
//
// {/* end */}
// <FlexBlock>
// <Controller
// key={`${context}.${dayIndex}.timeIntervals.${intervalIndex}.end`}
// name={`${context}.${dayIndex}.timeIntervals.${intervalIndex}.end`}
// control={control}
// render={({ field }) => (
// <InputControl
//
// label="Closing time"
// value={field.value}
// onChange={(value) => {
// field.onChange(value);
// // Update the main end time for the first interval
// if (intervalIndex === 0) {
// setValue(`${context}.${dayIndex}.${endKey}`, value);
// }
// }}
// type="time"
// disabled={submitting}
// />
// )}
// />
// </FlexBlock>
// </Flex>
//
// <Spacer margin="16px"/>
// </div>
// ))}
//
// {!allDay && (
// <Flex justify="center">
// <Button
// icon={plusCircle}
// variant="secondary"
// onClick={() => addTimeInterval(dayIndex)}
// disabled={submitting}
// >
// Add Time Interval
// </Button>
// </Flex>
// )}
// </>
// )}
// </CardBody>
// </Card>
//
// <Spacer margin="32px"/>
// </React.Fragment>
// );
// })}
//
// {/* availabilityExceptions */}
// {showAvailabilityExceptions && (
// <>
// <Spacer margin="16"/>
// <Heading level={5}>Availability Exceptions</Heading>
// <Divider margin="2"/>
// <Spacer margin="8"/>
//
// <Controller
// key="availabilityExceptions"
// name="availabilityExceptions"
// control={control}
// render={({ field }) => (
// <TextareaControl
//
// style={{ width: '100%' }}
// label=""
// help="Description of availability exceptions"
// value={field.value}
// onChange={field.onChange}
// rows={5}
// disabled={submitting}
// />
// )}
// />
// </>
// )}
// </>
// );
// };
//
// export default FhirOperationalHours;