import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { Card, CardHeader, CardBody, CardDivider } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { Divider } from '../ui/divider';
import { Heading } from '../ui/heading';
import { Spacer } from '../ui/spacer';
import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
import {
    IValueSet,
    useAuthServiceContext,
    usePractitionerServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirCodeableConcept,
    FhirPeriod,
    PractitionerRoleSelector
} from '../../components';
import { Practitioner } from 'fhir/r4';
// - 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 FhirScheduleProps {
    elevated?: boolean;
    disabled?: boolean;
    isNew: boolean;
}

export const FhirSchedule: React.FC<FhirScheduleProps> = ({ isNew, elevated = true, disabled = false }) => {
    const { control, watch } = useFormContext();
    const { currentUser, userRole, USER_ROLES, practitionerRoles } = useAuthServiceContext();
    const { practitionersList } = usePractitionerServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);

    // value sets
    const [practiceCodes, setPracticeCodes] = useState<IValueSet[]>([]);
    const [serviceCategory, setServiceCategory] = useState<IValueSet[]>([]);
    const [serviceType, setServiceType] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    const actorType = watch('actorType');
    const identifierFieldArray = useFieldArray({ control: control, name: 'identifier' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    practiceCodesValueSet,
                    serviceCategoryValueSet,
                    serviceTypeValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.practiceCodes),
                    fetchValueSet(valueSetUrls.serviceCategory),
                    fetchValueSet(valueSetUrls.serviceType)

                ]);

                setPracticeCodes(practiceCodesValueSet);
                setServiceCategory(serviceCategoryValueSet);
                setServiceType(serviceTypeValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

        loadValueSets();
    }, [fetchValueSet, valueSetUrls]);

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={4}>Schedule Information</Heading>
            </CardHeader>
            <CardBody>
                <Spacer margin={spacerMargin}/>

                {/* practitionerRole */}
                <PractitionerRoleSelector label='Practitioner'
                                          context={`practitionerRole`}
                                          practitionersList={userRole === USER_ROLES.RECEPTIONIST ? practitionersList : [{ practitioner: currentUser?.fhir as Practitioner, roles: practitionerRoles }]}
                                          required={true}
                                          disabled={!isNew || disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* active */}
                <Controller key="active"
                            name="active"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <ToggleControl
                                               label="Schedule is in active use"
                                               checked={field.value}
                                               onChange={field.onChange}/>
                            )}/>

                <Spacer margin={spacerMargin}/>

                {/* comment */}
                <Controller key="comment"
                            name="comment"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <TextareaControl
                                                 {...field}
                                                 label="Comment"
                                                 help="Comments on availability"
                                                 rows={5}/>
                            )}/>

                <Spacer margin={spacerMargin}/>
            </CardBody>
            <CardDivider/>
            <CardBody>
                <Spacer margin={spacerMargin}/>
                <Heading level={5}>Planning Horizon</Heading>
                <Divider margin="2"/>
                <Spacer margin={spacerMargin}/>

                {/* planningHorizon */}
                <FhirPeriod label="Period of time covered by schedule"
                            context="planningHorizon"
                            disabled={disabled}/>

                <Spacer margin={spacerMargin}/>
            </CardBody>
            <CardDivider/>
            <CardBody>
                <Spacer margin={spacerMargin}/>
                <Heading level={5}>Services</Heading>
                <Divider margin="2"/>
                <Spacer margin={spacerMargin}/>

                {/* serviceCategory */}
                <FhirCodeableConcept label="Service category"
                                     context="serviceCategory"
                                     options={serviceCategory}
                                     multiple={true}
                                     loading={loading}
                                     disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* serviceType */}
                <FhirCodeableConcept label="Service type"
                                     context="serviceType"
                                     options={serviceType}
                                     multiple={true}
                                     loading={loading}
                                     disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* specialty */}
                <FhirCodeableConcept label="Type of specialty needed"
                                     context="specialty"
                                     options={practiceCodes}
                                     multiple={true}
                                     loading={loading}
                                     disabled={disabled}/>

                <Spacer margin={spacerMargin}/>
            </CardBody>
            {/*<CardDivider/>*/}
            {/*<CardBody>*/}
            {/*    <TabPanel initialTabName="actors"*/}
            {/*              tabs={[*/}
            {/*                  { name: 'services', title: 'Services' },*/}
            {/*                  // { name: 'identifiers', title: 'Identifiers' }*/}
            {/*              ]}>*/}
            {/*        {(tab) => {*/}

            {/*            // services*/}
            {/*            if (tab.name === 'services') {*/}
            {/*                return (*/}
            {/*                    <div style={{ paddingTop: '16px' }}>*/}
            {/*                        <Spacer margin={spacerMargin}/>*/}

            {/*                        /!* serviceCategory *!/*/}
            {/*                        <FhirCodeableConcept label="Service category"*/}
            {/*                                             context="serviceCategory"*/}
            {/*                                             options={serviceCategory}*/}
            {/*                                             multiple={true}*/}
            {/*                                             disabled={submitting}/>*/}

            {/*                        <Spacer margin={spacerMargin}/>*/}

            {/*                        /!* serviceType *!/*/}
            {/*                        <FhirCodeableConcept label="Service type"*/}
            {/*                                             context="serviceType"*/}
            {/*                                             options={serviceType}*/}
            {/*                                             multiple={true}*/}
            {/*                                             disabled={submitting}/>*/}

            {/*                        <Spacer margin={spacerMargin}/>*/}

            {/*                        /!* specialty *!/*/}
            {/*                        <FhirCodeableConcept label="Type of specialty needed"*/}
            {/*                                             context="specialty"*/}
            {/*                                             options={practiceCodes}*/}
            {/*                                             multiple={true}*/}
            {/*                                             disabled={submitting}/>*/}

            {/*                        <Spacer margin={spacerMargin}/>*/}
            {/*                    </div>*/}
            {/*                );*/}
            {/*            }*/}

            {/*            // identifiers*/}
            {/*            if (tab.name === 'identifiers') {*/}
            {/*                return (*/}
            {/*                    <div style={{ paddingTop: '16px' }}>*/}
            {/*                        <Spacer margin={spacerMargin}/>*/}

            {/*                        /!* identifier *!/*/}
            {/*                        <FhirIdentifier identifiers={identifierFieldArray}*/}
            {/*                                        label="External Ids for this schedule"*/}
            {/*                                        submitting={submitting}/>*/}

            {/*                        <Spacer margin={spacerMargin}/>*/}
            {/*                    </div>*/}
            {/*                );*/}
            {/*            }*/}
            {/*        }}*/}
            {/*    </TabPanel>*/}
            {/*</CardBody>*/}
        </Card>
    );
};

export default FhirSchedule;