import { formClassName } from '@admin/components/ui/field-styles';
import { Modal } from '@admin/components/ui/modal';
import { TeamMemberFormFields } from '@admin/pages/team/members/team-member-form-fields';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { useForm } from '@inertiajs/react';
import { useEffect, FormEvent } from 'react';

type TeamPositionOption = {
    id: number;
    name: string;
};

type MemberRecord = {
    id: number;
    team_position_id: number;
    name: string;
    photo?: string;
    sort_order?: number;
    facebook?: string | null;
    linkedin?: string | null;
    x?: string | null;
    telegram?: string | null;
    status: boolean | number;
    positions?: TeamPositionOption[];
};

type EditTeamMemberProps = {
    isOpen: boolean;
    onClose: () => void;
    initialData: MemberRecord | null;
    positions: TeamPositionOption[];
};

export default function EditTeamMember({ isOpen, onClose, initialData, positions }: EditTeamMemberProps) {
    const { data, setData, put, processing, errors, reset, transform } = useForm({
        team_position_id: '',
        name: '',
        photo: '',
        sort_order: 0,
        facebook: '',
        linkedin: '',
        x: '',
        telegram: '',
        status: true,
    });

    transform((payload) => ({
        ...payload,
        team_position_id: payload.team_position_id ? Number(payload.team_position_id) : null,
    }));

    useEffect(() => {
        if (!initialData) {
            return;
        }

        setData({
            team_position_id: String(initialData.team_position_id ?? ''),
            name: initialData.name ?? '',
            photo: initialData.photo ?? '',
            sort_order: initialData.sort_order ?? 0,
            facebook: initialData.facebook ?? '',
            linkedin: initialData.linkedin ?? '',
            x: initialData.x ?? '',
            telegram: initialData.telegram ?? '',
            status: initialData.status === true || initialData.status === 1,
        });
    }, [initialData, setData]);

    const action = useFormResponse({
        onComplete: () => {
            reset();
            onClose();
        },
        loadingMessage: 'Saving changes...',
    });

    const handleSave = (event?: FormEvent) => {
        event?.preventDefault();

        if (!initialData) {
            return;
        }

        put(`/admin/api/update_team_member/${initialData.id}`, {
            onStart: action.onStart,
            onSuccess: action.onSuccess,
            onError: action.onError,
            preserveScroll: true,
        });
    };

    const positionOptions = initialData?.positions?.length ? initialData.positions : positions;

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="Edit team member"
            primaryButtonText="Save changes"
            onPrimaryAction={handleSave}
            processing={processing}
        >
            <form className={formClassName} noValidate onSubmit={handleSave}>
                <TeamMemberFormFields
                    data={data}
                    errors={errors}
                    positions={positionOptions}
                    setData={setData}
                    photoInputId="edit-team-member-photo"
                />
            </form>
        </Modal>
    );
}