import Card from "@admin/ui/Card";
import Col from "@admin/ui/Col";
import Row from "@admin/ui/Row";
import ApartmentForm from "../ApartmentForm";
import { Link, useForm } from "@inertiajs/react";
import { useFormResponse } from "@/hooks/useFormResponse";
import { Toaster } from "react-hot-toast";

export default function Apartment({ apartment, amenities, apartmentTypes, featuredWidth, featuredHeight, galleryWidth, galleryHeight }) {
    const { data, setData, put, processing, errors } = useForm({
        name: apartment?.name || "",
        unit_number: apartment?.unit_number || "",
        apartment_type: apartment?.apartment_type || "",
        floor: apartment?.floor || "",
        max_occupancy: apartment?.max_occupancy ?? "",
        bedrooms: apartment?.bedrooms ?? 2,
        bed_type: apartment?.bed_type || "",
        bathrooms: apartment?.bathrooms ?? 1,
        kitchen_facilities: apartment?.kitchen_facilities || "",
        living_area: apartment?.living_area || "",
        price: apartment?.price ?? "",
        description: apartment?.description || "",
        house_rules: apartment?.house_rules || "",
        featured_image: apartment?.featured_image || "",
        gallery: apartment?.gallery || [],
        videos: apartment?.videos || [],
        amenity_ids: apartment?.amenity_ids || [],
        sort_order: apartment?.sort_order ?? 0,
        status: apartment?.status === 1 || apartment?.status === true,
        is_featured: apartment?.is_featured === 1 || apartment?.is_featured === true,
    });

    const handleSubmit = (event) => {
        event.preventDefault();
        const formResponse = useFormResponse();
        put(`/admin/api/update_apartment/${apartment.id}`, {
            preserveScroll: true,
            onSuccess: formResponse.onSuccess,
            onError: formResponse.onError,
        });
    };

    return (
        <Row md="12">
            <Col lg="12">
                <Toaster />
                <h2 className="page-title">Edit apartment</h2>
                <p className="mb-3">
                    <Link href="/admin/apartments">Back to apartments</Link>
                </p>
                <Row>
                    <Col lg="12">
                        <Card md="6" title={apartment?.name || "Apartment"}>
                            <ApartmentForm
                                data={data}
                                setData={setData}
                                errors={errors}
                                amenities={amenities}
                                apartmentTypes={apartmentTypes}
                                featuredWidth={featuredWidth}
                                featuredHeight={featuredHeight}
                                galleryWidth={galleryWidth}
                                galleryHeight={galleryHeight}
                                processing={processing}
                                onSubmit={handleSubmit}
                                submitLabel="Save changes"
                            />
                        </Card>
                    </Col>
                </Row>
            </Col>
        </Row>
    );
}