Notes

"use client";
import { useMemo, useState } from "react";
//TODO Client componentle ilgili bi sorun çıkıyor ??
import Modal from "./Modal";
import Heading from "../Heading";
import { categories } from "../navbar/Categories";
import CategoryInput from "../inputs/CategoryInput";
import axios from "axios";
import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
import CitySelect from "../inputs/CitySelect";
import { useRouter } from "next/navigation";
import useIlanModal from "@/app/hooks/useIlanModal";
import Counter from "../inputs/Counter";
import RoomSelect from "../inputs/RoomSelect";
import Input from "../inputs/Input";
import CommissionSelect from "../inputs/CommissionSelect";
import { toast } from "react-hot-toast";
import { useSession } from "next-auth/react";

interface Post {
id?: number; // Otomatik generate
owner_id?: number; // Session'dan al
title: String; // İlanın başlığı
description: String;
price: number;
commission: number;
rooms: String;
address: String;
year: String;
post_date?: String;
thumbnail_id: number;
is_pool: boolean;
metreKareNet?: number;
metreKareBrut?: number;
binaYasi?: number;
bulunduguKat?: number;
katSayisi?: number;
isitma?: String;
balkon?: String;
asansor?: String;
otopark?: String;
esyali?: String;
kullanimDurumu?: String;
siteIcersinde?: String;
siteAdi?: String;
aidatTl?: String;
tapuDurumu?: String;
takas?: String;
gabari?: String;
imarDurumu?: String;
metreKareFiyat?: String;
adaNo?: String;
parselNo?: String;
emsal?: String;
katKarsiligi?: String;
katDaireSayisi?: String;
}

enum STEPS {
CATEGORY = 0,
LOCATION = 1,
INFO = 2,
IMAGES = 3,
DESCRIPTION = 4,
PRICE = 5,
COMMISSION = 6,
}

let file: FormData;

const İlanModal = () => {
const user = useSession();
const user_id = user.data?.user?.id;

const router = useRouter();

const ilanModal = useIlanModal();

const [step, setStep] = useState(STEPS.CATEGORY);
const [isLoading, setIsLoading] = useState(false);
//INITILIZE FORM

//İLERİ GERİ STEP
const onBack = () => {
setStep((value) => value - 1);
};

const onNext = () => {
setStep((value) => value + 1);
};

// CREATE'e basıldığı an bu çağırılıyor.
const onSubmit: SubmitHandler<FieldValues> = (data) => {
if (step !== STEPS.COMMISSION) {
return onNext();
}
setIsLoading(true);

/* TODO:
1. Get user id --> user.data?.user?.id
2. Send post request to create post with user id
3. Get back post id
4. Send post request to create photo with post_id
*/

let com = commission["value"].replace("%", "");
com = parseInt(com, 10); // TODO [Dogukan] --> Komisyon alanını double kabul edebilir yap.

// Backend'e gönderilecek objenin tipi bu olmalı.

const post: Post = {
owner_id: 1, // Session'dan alınacak // TODO !!!!!!!!!!!!!!
title: title,
description: description,
price: price,
commission: com,
rooms: rooms,
// restrooms: 1, --> Backend'de yok eklenecek [TODO: Dogukan]
address: "address", // Şimdilik sadece ilçe olarak alıyor. Input ile tam konum alınabilir. Backend'e eklenmesi de yapılacak/Açık adress olmıcak evin mahalle eklenilebilir
year: "2024", // Bunun form'da input alanı yok. 2024 olarak default dolduruluyor./create the realtime date yaparız burayı en son -->Erin
thumbnail_id: 1, // Fotoğraf ile beraber gelecek.
is_pool: category == "Havuz İlanlar" ? true : false,
metreKareBrut: 1,
metreKareNet: 1,
binaYasi: 1,
bulunduguKat: 1,
katSayisi: 1,
isitma: undefined,
balkon: undefined,
asansor: undefined,
otopark: undefined,
esyali: undefined,
kullanimDurumu: undefined,
siteIcersinde: undefined,
siteAdi: undefined,
aidatTl: undefined,
tapuDurumu: undefined,
takas: undefined,
gabari: undefined,
imarDurumu: undefined,
metreKareFiyat: undefined,
adaNo: undefined,
parselNo: undefined,
emsal: undefined,
katKarsiligi: undefined,
katDaireSayisi: undefined,
};

console.log(post)

let post_id = -1;

if (user.status == "authenticated") {
prepareFile(post!, user.data.user?.id!);
}

axios
.post("http://ortakemlakcilar.com:8080/posts/add", file)
.then((resp) => {
console.log(resp)
// Step 3 --> Set post_id to global variable.
post_id = resp.data;
// TODO --> Owner id is hardcoded fix it!!!!



// Step 4 --> Send post request for photo with post_id
// uploadFile(file);

toast.success("Listing Created !"); // Toast Messegelar çıkmıyo
router.refresh();
reset();
setStep(STEPS.CATEGORY);
ilanModal.onClose();
})
.catch(() => {
toast.error("Something went wrong. !");
})
.finally(() => {
setIsLoading(false);
});
};

// Default value'lar önemli. Olması gerektiği gibi eklenmeli (String ise "", int ise 0 gibi...)
const {
register,
handleSubmit,
setValue,
watch,
formState: { errors },
reset,
} = useForm<FieldValues>({
//Buraya'da Eklemek Lazım mı ??
defaultValues: {
description: "",
adress: null,
rooms: "0+0",
restrooms: 0,
commission: 0,
year: "2024",
},
});

// Watch'lar düzenli olmalı. Input component'inin id'si buradaki watch'ı represent ediyor. //Aynı şekilde buraya lazım mı ?
const category = watch("category");
const description = watch("description");
const price = watch("price");
const fileupload = watch("fileupload");
const title = watch("title");
const address = watch("address");
const rooms = watch("rooms");
const restrooms = watch("restrooms");
const commission = watch("commission");
const metreKareBrut = watch("metreKareBrut");
const metreKareNet = watch("metreKareNet");
const binaYasi = watch("metreKareBrut");
const bulunduguKat = watch("bulunduguKat");
const katSayisi = watch("katSayisi");
const isitma = watch("isitma");
const balkon = watch("balkon");
const asansor = watch("asansor");
const otopark = watch("otopark");
const esyali = watch("esyali");
const kullanimDurumu = watch("kullanimDurumu");
const siteIcersinde = watch("siteIcersinde");
const siteAdi = watch("siteAdi");
const aidatTl = watch("aidatTl");
const tapuDurumu = watch("tapuDurum");
const takas = watch("takas");
// Bunun için bir input yok? //oto tarih almak daha iyi olur
const year = watch("year");

// Custom value set etmek için kullanılıyor.
const setCustomValue = (id: string, value: any) => {
setValue(id, value, {
shouldDirty: true,
shouldTouch: true,
shouldValidate: true,
});
};

const actionLabel = useMemo(() => {
if (step == STEPS.COMMISSION) {
return "Create";
}
return "Next";
}, [step]);

const secondaryActionLabel = useMemo(() => {
if (step == STEPS.CATEGORY) {
return undefined;
}
return "Back";
}, [step]);

let bodyContent = (
<div className="flex flex-col gap-8">
<Heading title="İlanınız hangi kategoride ? " subtitle="Kategori seçin" />

<div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-[50vh] overflow-y-auto">
{categories.map((item) => (
<div key={item.label} className="col-span-1">
<CategoryInput
onClick={(category) => setCustomValue("category", category)}
selected={category == item.label}
label={item.label}
icon={item.icon}
/>
</div>
))}
</div>
</div>
);

if (step == STEPS.LOCATION) {
bodyContent = (
<div className="flex flex-col gap-8">
<Heading title="İlanınız Nerede?" subtitle="Konum Seçin" />

<CitySelect
value={address}
onChange={(value) => {
setCustomValue("address", value);
}}
/>
</div>
);

// Split by space
if (address != null) {
let addressArray = address.split(" ");
console.log(typeof (address))

let city = addressArray[0];
let district = addressArray[1];
let neighborhood = addressArray[2];

console.log(address);
}
}

if (step == STEPS.INFO) {
bodyContent = (
<div className="flex flex-col gap-8">
<Heading
title="İlanın özelliklerini gir"
subtitle="Oda sayısı, banyo adedi"
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-[50vh] overflow-y-auto">
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<RoomSelect
value={rooms}
onChange={(value) => setCustomValue("rooms", value)}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="metreKareNet"
label="m²(Net)"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="metreKareBrut"
label="m²(Brüt)"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Arsa" ||
category == "Kiralık Arsa" ||
category == "Satılık Bina" ||
category == "Kiralık Bina" ? (
<Input
id="metreKareBrut"
label="m²
(Metre Kare)"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Arsa" || category == "Kiralık Arsa" ? (
<Input
id="imarDurumu"
label="İmar Durumu"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Arsa" || category == "Kiralık Arsa" ? (
<Input
id="m2Fiyat"
label="m² Fiyatı"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Arsa" || category == "Kiralık Arsa" ? (
<Input
id="adaNo"
label="Ada No"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Arsa" || category == "Kiralık Arsa" ? (
<Input
id="parselNo"
label="Parsel No"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Arsa" || category == "Kiralık Arsa" ? (
<Input
id="emsal"
label="Kaks (Emsal)"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Arsa" || category == "Kiralık Arsa" ? (
<Input
id="gabari"
label="Gabari"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Arsa" || category == "Kiralık Arsa" ? (
<Input
id="m2Fiyat"
label="m² Fiyatı"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="tapuDurumu"
label="Tapu Durumu"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}{" "}
{category == "Satılık Arsa" || category == "Kiralık Arsa" ? (
<Input
id="katKarşiliği"
label="Kat Karşılığı"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık Bina" ||
category == "Kiralık Bina" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="binaYasi"
label="Bina Yaşı"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="bulunduguKat"
label="Bulunduğu Kat"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Satılık Bina" ||
category == "Kiralık Bina" ||
category == "Kiralık İş Yeri" ? (
<Input
id="katSayisi"
label="Kat Sayısı"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Bina" || category == "Kiralık Bina" ? (
<Input
id="katDaireSayisi"
label="Bir Kattaki Daire Sayısı"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Satılık Bina" ||
category == "Kiralık Bina" ||
category == "Kiralık İş Yeri" ? (
<Input
id="isitma"
label="Isıtma"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="balkon"
label="Balkon"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}{" "}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık Bina" ||
category == "Kiralık Bina" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="otopark"
label="Otopark"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="esyali"
label="Eşyalı"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="kullanimDurumu"
label="Kullanım Durumu"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="siteIcersinde"
label="Site İçersinde"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="siteAdi"
label="Site Adı"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="aidatTl"
label="Aidat (TL)"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="tapuDurum"
label="Tapu Durumu"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık Bina" ||
category == "Kiralık Bina" ||
category == "Satılık İş Yeri" ||
category == "Satılık Arsa" ||
category == "Satılık Arsa" ||
category == "Kiralık İş Yeri" ? (
<Input
id="takas"
label="Takas"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık Bina" ||
category == "Kiralık Bina" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Input
id="asansor"
label="Asansör"
disabled={isLoading}
register={register}
errors={errors}
/>
) : (
<></>
)}
{category == "Satılık Konut" ||
category == "Kiralık Konut" ||
category == "Satılık İş Yeri" ||
category == "Kiralık İş Yeri" ? (
<Counter
title="Banyo adedi"
subtitle=""
value={restrooms}
onChange={(value) => setCustomValue("restrooms", value)}
/>
) : (
<></>
)}
</div>
</div>
);
}

function prepareFile(post: Post, owner_id: number) {
console.log(post);

let formData = new FormData();
formData.append("files", fileupload[0]);

formData.append(
"post",
new Blob([JSON.stringify(post)], {
type: "application/json",
})
);

file = formData;
}

async function uploadFile(file: any) {
var boundary = Math.random().toString().substring(2);
await fetch("http://ortakemlakcilar.com:8080/photos/add", {
method: "POST",
body: file,
})
.then((result) => result.text())
.then((text) => alert(text));
}

if (step == STEPS.IMAGES) {
bodyContent = (
<div className="flex flex-col gap-8">
<Heading title="Fotoğraf Yükleyin" subtitle="" />
{/**TODO: Multiple ImageUpload */}
<Input
id="fileupload"
type="file"
label=""
disabled={isLoading}
register={register}
errors={errors}
required
/>
</div>
);
}

if (step == STEPS.DESCRIPTION) {
bodyContent = (
<div className="flex flex-col">
<Heading title="İlanınıza başlık ve açıklama girin " subtitle="" />
<div className="flex flex-col gap-8 ">
<Heading title="" subtitle="İlan başlığı girin" />
</div>

{/* Input component'in id'si watch ile yukarıda izlenmeli */}
<Input
id="title"
label="Başlık "
disabled={isLoading}
register={register}
errors={errors}
required
/>
<hr />
<Heading title="" subtitle="İlanınıza açıklama girin" />

{/* Input component'in id'si watch ile yukarıda izlenmeli */}
<Input
id="description"
label="Açıklama "
disabled={isLoading}
register={register}
errors={errors}
required
/>
</div>
);
}

if (step == STEPS.PRICE) {
bodyContent = (
<div className="flex flex-col gap-8">
<Heading title="İlan fiyatı girin" subtitle="Türk Lirası cinsinden" />

{/* Input component'in id'si watch ile yukarıda izlenmeli */}
<Input
id="price"
label="Fiyat "
disabled={isLoading}
register={register}
errors={errors}
required
/>
</div>
);
}

if (step == STEPS.COMMISSION) {
bodyContent = (
<div className="flex flex-col gap-8">
<Heading
title="Komisyon Paylaşım oranınızı seçin"
subtitle="(%0-%100)"
/>
<CommissionSelect
value={commission}
onChange={(value) => setCustomValue("commission", value)}
/>
</div>
);
}

return (
<Modal
title="İlan Oluştur"
isOpen={ilanModal.isOpen}
onClose={ilanModal.onClose}
onSubmit={handleSubmit(onSubmit)}
actionLabel={actionLabel}
secondaryActionLabel={secondaryActionLabel}
secondaryAction={step == STEPS.CATEGORY ? undefined : onBack}
body={bodyContent}
/>
);
};
export default İlanModal;