"use client";

import Container from "@/components/elements/Container";
import { IAdvertising, IAdvertisingType } from "@/types/types";
import useAxios from "@/hooks/useAxios";
import React, { useEffect, useState } from "react";
import MainBillboardCard from "@/components/billboards/MainBillboardCard/MainBillboardCard";
import RoundedDiv from "@/components/elements/RoundedDiv";
import RoundedButton from "@/components/elements/RoundedButton";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import Link from "next/link";

function SuccessBillboard() {
  const { request } = useAxios();
  const searchParams = useSearchParams();
  const projectId = searchParams.get("projectId");

  const [advertising, setAdvertising] = useState<IAdvertising>();
  const [typeList, setTypeList] = useState<IAdvertisingType[] | null>(null);
  const [price, setPrice] = useState("");
  useEffect(() => {
    const fetchAd = async () => {
      const response = await request<{ advertising: IAdvertising }>(
        "GET",
        `/advertising/get/web/${projectId}`
      );
      setAdvertising(response?.advertising);
    };
    const fetchStates = async () => {
      try {
        const response = await request<{
          advertisingTypes: IAdvertisingType[];
        }>("GET", "/advertising/types");
        setTypeList(response?.advertisingTypes || null);
      } catch (err) {
        console.log(err);
      }
    };
    fetchAd();
    fetchStates();
  }, []);

  useEffect(() => {
    if (advertising?.type && typeList) {
      const foundType = typeList.find((item) => item.name === advertising.type);
      if (foundType) {
        setPrice(String(foundType.price)); // فرض بر اینکه price عددی است و نیاز به تبدیل به رشته دارد
      }
    }
  }, [advertising, typeList]);
  return (
    <Container>
      <h6 className="font-bold md:text-xl text-lg text-center mt-2 line-clamp-2 mb-4 text-[#17A600] ">
        پرداخت موفق
      </h6>
      <div className="flex flex-col items-center text-sm">
        <Image
          width={50}
          height={50}
          alt={"verify icon"}
          src={`/images/icons/success.svg`}
          className="pb-1 mb-5"
        />
      </div>
      <div className="px-4 w-full text-sm md:text-md font-semibold mt-10">
        {advertising && <MainBillboardCard billboard={advertising} />}
        <div className="flex flex-col items-center gap-4 mt-4">
          <RoundedDiv className="p-2 w-full">
            {advertising?.type === "special"
              ? "ویژه"
              : advertising?.type === "normal"
              ? "نمایش ساده"
              : advertising?.type === "free"
              ? "رایگان"
              : "برجسته"}
            : {Number(price).toLocaleString()} تومان
          </RoundedDiv>
          <p className="my-5">
            آگهی شما در بیلبورد ثبت شد. پس از بررسی آگهی شما در بیلبورد منتشر
            خواهد شد.
          </p>
          <Link href={"/settings/my-billboards"}>
            <RoundedButton className="w-32 h-9 !border-[#0C8002] text-[#0C8002]">
              بیلورد من
            </RoundedButton>
          </Link>
        </div>
      </div>
    </Container>
  );
}

export default SuccessBillboard;
