"use client";

import { TrashIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import { BillingLocation, YearMonth } from "../lib/db-types";
import { updateOrAddLocation } from "../lib/actions/locationActions";
import { useFormState } from "react-dom";
import { Main } from "./Main";
import Link from "next/link";
import { gotoHome } from "../lib/actions/navigationActions";

export interface LocationEditFormProps {
    /** location which should be edited */
    location?: BillingLocation,
    /** year adn month at a new billing location should be assigned */
    yearMonth?: YearMonth   
}

export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth }) =>
{
    const initialState = { message: null, errors: {} };
    const handleAction = updateOrAddLocation.bind(null, location?._id, yearMonth);
    const [ state, dispatch ] = useFormState(handleAction, initialState);

    // redirect to the main page
    const handleCancel = () => {
        if(location) gotoHome(location?.yearMonth);
    };

    return(
        <Main>
            <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
                <div className="card-body">
                    <form action={dispatch}>
                        {
                            location && 
                                <Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
                                    <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
                                </Link>
                        }
                        <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
                        <div id="status-error" aria-live="polite" aria-atomic="true">
                            {state.errors?.locationName &&
                            state.errors.locationName.map((error: string) => (
                                <p className="mt-2 text-sm text-red-500" key={error}>
                                {error}
                                </p>
                            ))}
                        </div>

                        <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
                        <div id="status-error" aria-live="polite" aria-atomic="true">
                            {state.errors?.locationNotes &&
                            state.errors.locationNotes.map((error: string) => (
                                <p className="mt-2 text-sm text-red-500" key={error}>
                                {error}
                                </p>
                            ))}
                        </div>

                        <div id="status-error" aria-live="polite" aria-atomic="true">
                            {
                                state.message &&
                                    <p className="mt-2 text-sm text-red-500">
                                        {state.message}
                                    </p>
                            }
                        </div>

                        <div className="pt-4">
                          <button className="btn btn-primary">Save</button>
                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </Main>
    )
}