import { TextControl } from "../ui/text-control";
import { FormTokenField, type TokenItem } from "../ui/form-token-field";
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Flex, FlexItem } from '../ui/flex';
import { PlusCircle, Trash2, XCircle } from 'lucide-react';
import { Controller, useWatch, useFormContext, UseFieldArrayReturn, FieldValues } from 'react-hook-form';
import { HumanName } from 'fhir/r4';

interface FhirHumanNameProps {
    names: UseFieldArrayReturn<FieldValues, 'name'>;
    required?: boolean;
    submitting?: boolean;
}

const FhirHumanName = ({ names, required = false, submitting = false }: FhirHumanNameProps) => {
    const { control, setValue, getValues } = useFormContext();
    const namePrefixes = ['Mr.', 'Mrs.', 'Ms.', 'Dr.', 'Prof.', 'Rev.', 'Hon.', 'Sir', 'Lady'];
    const nameSuffixes = ['Jr.', 'Sr.', 'II', 'III', 'MD', 'PhD', 'DDS', 'Esq.', 'CPA'];

    const allNameFields = useWatch({
        control,
        name: 'name',
        defaultValue: names.fields
    });

    const addName = () => {
        if (canAddName()) {
            names.append({
                family: '',
                given: [''],
                prefix: [],
                suffix: [],
                use: 'official'
            });
        }
    };

    const removeName = (index: number) => {
        names.remove(index);
    };

    const addGivenName = (nameIndex: number) => {
        if (canAddGivenName(nameIndex)) {
            const currentGiven = getValues(`name.${nameIndex}.given`) || [];
            setValue(`name.${nameIndex}.given`, [...currentGiven, '']);
        }
    };

    const removeGivenName = (nameIndex: number, givenNameIndex: number) => {
        const currentGiven = getValues(`name.${nameIndex}.given`) || [];
        if (givenNameIndex > -1 && givenNameIndex < currentGiven.length) {
            const newGiven = [...currentGiven];
            newGiven.splice(givenNameIndex, 1);
            setValue(`name.${nameIndex}.given`, newGiven);
        }
    };

    const canAddName = (): boolean => {
        if (names.fields.length === 0) {
            return true;
        }

        const lastNameIndex = names.fields.length - 1;
        const lastFamily = getValues(`name.${lastNameIndex}.family`) || '';
        const lastGiven = getValues(`name.${lastNameIndex}.given`) || [];

        return lastFamily.trim() !== '' || lastGiven.some((g: string) => g.trim() !== '');
    };

    const canAddGivenName = (nameIndex: number): boolean => {
        const givenNames = getValues(`name.${nameIndex}.given`) || [];
        if (givenNames.length === 0) {
            return true;
        }

        const lastGivenName = givenNames[givenNames.length - 1];
        return lastGivenName.trim() !== '';
    };

    const tokenText = (tokens: (string | TokenItem)[]) => tokens.map((token) => (typeof token === 'string' ? token : token.value));

    const handlePrefixChange = (nameIndex: number, tokens: (string | TokenItem)[]) => {
        setValue(`name.${nameIndex}.prefix`, tokenText(tokens));
    };

    const handleSuffixChange = (nameIndex: number, tokens: (string | TokenItem)[]) => {
        setValue(`name.${nameIndex}.suffix`, tokenText(tokens));
    };

    return (
        <>
            {names.fields.map((name: HumanName, nameIndex: number) => {
                const givenNames: string[] = allNameFields?.[nameIndex]?.given ?? [''];

                return (
                    <>
                        <div key={name.id} className="flex flex-col gap-3">
                            {names.fields.length > 1 && (
                                <div className="flex items-center justify-between gap-3">
                                    <h4 className="ak-card__title">Name {nameIndex + 1}</h4>
                                    <button
                                        type="button"
                                        className="btn btn-red-ghost"
                                        title="Remove name"
                                        aria-label="Remove name"
                                        onClick={() => removeName(nameIndex)}
                                        disabled={submitting}
                                    >
                                        <Trash2 />
                                    </button>
                                </div>
                            )}
                            <div className="grid gap-3 sm:grid-cols-2">
                                <div>
                                <Controller key={`name.${nameIndex}.family`}
                                            name={`name.${nameIndex}.family`}
                                            control={control}
                                            rules={{ required: required }}
                                            render={({ field, fieldState }) => (
                                                <>
                                                    <TextControl label={required ? 'Family name *' : 'Family name'}
                                                                 {...field}
                                                                 disabled={submitting}/>

                                                    {fieldState.error && (
                                                        <DismissibleAlert status="error">
                                                            Family name is required
                                                        </DismissibleAlert>
                                                    )}
                                                </>
                                            )}/>
                                </div>
                                {givenNames.map((_givenName: string, givenNameIndex: number) => (
                                    <div key={`${nameIndex}-${givenNameIndex}`} className="flex items-end gap-2">
                                        <div className="min-w-0 flex-1">
                                        <Controller key={`name.${nameIndex}.given.${givenNameIndex}`}
                                                            name={`name.${nameIndex}.given.${givenNameIndex}`}
                                                            control={control}
                                                            rules={{ required: givenNameIndex === 0 }}
                                                            render={({ field, fieldState }) => (
                                                                <>
                                                                    <TextControl
                                                                                 label={givenNameIndex === 0 ? 'Given name *' : `Given name ${givenNameIndex + 1}`}
                                                                                 {...field}
                                                                                 disabled={submitting}/>
                                                                    {fieldState.error && (
                                                                        <DismissibleAlert status="error">
                                                                            Given name is required
                                                                        </DismissibleAlert>
                                                                    )}
                                                                </>
                                                            )}/>
                                        </div>
                                        {givenNames.length > 1 && (
                                            <button
                                                type="button"
                                                className="btn btn-red-ghost"
                                                title="Remove given name"
                                                aria-label="Remove given name"
                                                onClick={() => removeGivenName(nameIndex, givenNameIndex)}
                                                disabled={submitting}
                                            >
                                                <XCircle />
                                            </button>
                                        )}
                                    </div>
                                ))}
                                <div>
                                <Controller key={`name.${nameIndex}.prefix`}
                                                    name={`name.${nameIndex}.prefix`}
                                                    control={control}
                                                    render={({ field }) => (
                                                        <FormTokenField label="Prefix"
                                                                        __experimentalShowHowTo={false}
                                                                        __experimentalAutoSelectFirstMatch
                                                                        __experimentalExpandOnFocus
                                                                        value={field.value || []}
                                                                        suggestions={namePrefixes}
                                                                        onChange={(tokens) => handlePrefixChange(nameIndex, tokens)}
                                                                        disabled={submitting}/>
                                                    )}/>
                                </div>
                                <div>
                                <Controller key={`name.${nameIndex}.suffix`}
                                                    name={`name.${nameIndex}.suffix`}
                                                    control={control}
                                                    render={({ field }) => (
                                                        <FormTokenField label="Suffix"
                                                                        __experimentalShowHowTo={false}
                                                                        __experimentalAutoSelectFirstMatch
                                                                        __experimentalExpandOnFocus
                                                                        value={field.value || []}
                                                                        suggestions={nameSuffixes}
                                                                        onChange={(tokens) => handleSuffixChange(nameIndex, tokens)}
                                                                        disabled={submitting}/>
                                                    )}/>
                                </div>
                            </div>
                            <div>
                                <button
                                    type="button"
                                    className="btn btn-blue-ghost"
                                    onClick={() => addGivenName(nameIndex)}
                                    disabled={!canAddGivenName(nameIndex) || submitting}
                                >
                                    Add given name
                                </button>
                            </div>
                        </div>

                        <Divider margin="8"/>

                        {nameIndex === names.fields.length - 1 && (
                            <Flex align="center" justify="center">
                                <FlexItem>
                                    <button
                                        type="button"
                                        className={`btn btn-blue-ghost${submitting ? ' btn-busy' : ''}`}
                                        onClick={addName}
                                        disabled={submitting}
                                    >
                                        <PlusCircle />
                                        Add Name
                                    </button>
                                </FlexItem>
                            </Flex>
                        )}
                    </>
                );
            })}
        </>
    );
};

export default FhirHumanName;