"use client";
import Image from "next/image";
import React, {useEffect, useState} from "react";
import Wrapper from "@/layout/DefaultWrapper";
import FabenCategories from "@/components/faben-categories/FabenCategories";
import httpClient from "@/utils/HttpClient";
import {jwtDecode} from "jwt-decode";
import {toast} from "react-toastify";
import logoImg from "../../../../public/assets/img/logo/logo_stabil.png";

const ProductPage = ({params}: any) => {
    console.log(params);
    const [isChecked, setIsChecked] = useState(false);
    const [isLogin, setIsLogin] = useState(false);
    useEffect(() => {
        const token = localStorage.token;
        if (token) {
            console.log("dd",token)
            const decoded: any = jwtDecode(token);
            console.log(decoded);
            setIsLogin(true);
        }
    }, []);
    const [productLoading, setProductLoading] = useState(false);
    const [product, setProduct] = useState<any>({});
    useEffect(() => {
        const fetch = async () => {
            setProductLoading(true);
            const res = await httpClient.get(`products/${params.type}`);
            setProduct(res.data);
            setProductLoading(false);

            const res2 = await httpClient.get(
                `check-price-offer/by-product/${res.data.id}`
            );
            console.log(res2);
            if (res2.data.isExist) {
                setIsChecked(true);
            }
        };

        fetch();
    }, []);

    const downloadCatalog = (pdfUrl: string) => {
        const link = document.createElement("a");
        link.href = pdfUrl;
        link.target = "_blank";
        link.download = "katalog.pdf"; // specify the filename
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };
    const downloadPDF = (link: any) => {

        if (!isLogin) {
            toast.warning("PDF'i indirmek için lütfen giriş yapınız");

        } else {
            downloadCatalog(link)
        }
    }
    const priceRequest = async () => {
        try {
            await httpClient.post("price-offer", {productId: product.id});
            toast.success("Fiyat talebiniz alınmıştır sizinle iletişime geçeceğiz");
            setIsChecked(true);
        } catch (e) {
            toast.error("Bir hata oluştu");
        }
    };

    return (
        <Wrapper>
            <main style={{backgroundColor: "#fff"}}>
                <div className="row">
                    <div className="col-xl-2 col-lg-2 col-md-11"></div>
                    <FabenCategories/>
                    <div className="col-xl-6 col-lg-6 col-md-10">
                        <div className="post-meta ml-30 mr-20 mt-50">
              <span>
                <i className="fas fa-right"> </i> Ürünler{" "}
              </span>
                            <span>
                <a href="#">
                  <i className="fas fa-right"> </i>
                    {product.categoryName}
                </a>
              </span>
                            <span>
                <a href="#" style={{color: "black"}}>
                  <i className="fas fa-home"> </i> {product.name}
                </a>
              </span>
                        </div>
                        <section className="Shop-banner-area pt-10 pb-120">
                            <div className="container">
                                <div className="row">
                                    <div className="col-12">
                                        <div className="tab-content" id="myTabContent">
                                            <div
                                                className="tab-pane fade show active"
                                                id="home"
                                                role="tabpanel"
                                                aria-labelledby="home-tab"
                                            >
                                                <div className="row">
                                                    <div className="col-lg-6 col-md-6 col-sm-12">
                                                        <div className="product mb-40">
                                                            <div className="product__img">
                                                                <Image
                                                                    style={{
                                                                        width: "100%",
                                                                        objectFit: "contain",
                                                                    }}
                                                                    src={"me.png"}
                                                                    width={"400"}
                                                                    height={"500"}
                                                                    loader={() =>
                                                                        `https://fabenapi.vevasoftprojects.com/${product.image}`
                                                                    }
                                                                    alt="item-img"
                                                                />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="col-lg-6 col-md-6 col-sm-12">
                                                        <div className="col-lg-10 col-md-10 col-sm-12">
                                                            <div className="product mb-20">
                                                                <div className="product__content text-center pl-5 pt-5">
                                                                    <div className="row">
                                                                        <div className="col-lg-5 col-md-5 col-sm-8">
                                                                            <h2
                                                                                style={{
                                                                                    textAlign: "left",
                                                                                    fontSize: "1.6em",
                                                                                }}
                                                                            >
                                                                                {product.name}
                                                                            </h2>
                                                                        </div>
                                                                        <div className="col-lg-6 col-md-6 col-sm-4">
                                                                            <Image
                                                                                style={{
                                                                                    cursor: "pointer",
                                                                                    boxShadow:
                                                                                        "0px 4px 8px rgba(0, 0, 0, 0.1)",
                                                                                }}
                                                                                src={logoImg}
                                                                                width={"120"}
                                                                                height={"60"}
                                                                                alt="item-img"
                                                                            />
                                                                        </div>
                                                                    </div>

                                                                    {product.pdfDrawingLink && (
                                                                        <div
                                                                            style={{
                                                                                textAlign: "left",
                                                                            }}
                                                                        >
                                                                            <br/>
                                                                            <br/>
                                                                            <a
                                                                                onClick={() =>
                                                                                    downloadPDF(`https://fabenapi.vevasoftprojects.com${product.pdfDrawingLink}`)

                                                                                }
                                                                                style={{
                                                                                    backgroundColor: "#15c39a",
                                                                                    borderColor: "#15c39a",
                                                                                    borderBottomColor: "#0ba480",
                                                                                    padding: "0.6rem",
                                                                                    paddingLeft: "2rem",
                                                                                    cursor: "pointer",
                                                                                    paddingRight: "2rem",
                                                                                    color: "#ffffff",
                                                                                    maxWidth: "200px",
                                                                                    borderRadius: "4px",
                                                                                    marginTop: "1rem",
                                                                                    boxShadow:
                                                                                        "0px 4px 8px rgba(0, 0, 0, 0.1)",
                                                                                }}
                                                                            >
                                                                                <span>  <i
                                                                                    className="fas fa-file-pdf mr-5"></i> PDF</span>
                                                                            </a>
                                                                        </div>
                                                                    )}

                                                                    {product.threeDModelLink && (
                                                                        <div
                                                                            style={{
                                                                                textAlign: "left",
                                                                            }}
                                                                        >
                                                                            <br/>
                                                                            <a
                                                                                onClick={() =>
                                                                                    downloadCatalog(
                                                                                        `https://fabenapi.vevasoftprojects.com${product.threeDModelLink}`
                                                                                    )
                                                                                }
                                                                            >
                                        <span className={"btn-text"}>
                                          3d Modeli İndir
                                        </span>
                                                                            </a>
                                                                        </div>
                                                                    )}
                                                                    <br/>
                                                                    <div
                                                                        style={{
                                                                            textAlign: "left",
                                                                        }}
                                                                    >
                                                                        <a
                                                                            onClick={() =>
                                                                                downloadCatalog(
                                                                                    "https://fabenapi.vevasoftprojects.com/ass-catalog.pdf"
                                                                                )
                                                                            }
                                                                            style={{
                                                                                backgroundColor: "#15c39a",
                                                                                borderColor: "#15c39a",
                                                                                borderBottomColor: "#0ba480",
                                                                                padding: "0.6rem",
                                                                                paddingLeft: "5rem",
                                                                                paddingRight: "4rem",
                                                                                color: "#ffffff",
                                                                                maxWidth: "300px",
                                                                                borderRadius: "4px",
                                                                                marginTop: "1rem",
                                                                                cursor: "pointer",
                                                                                boxShadow:
                                                                                    "0px 4px 8px rgba(0, 0, 0, 0.1)",
                                                                            }}
                                                                        >
                                                                            <span>Kataloğu İndir</span>
                                                                        </a>
                                                                        <br/>
                                                                    </div>
                                                                    <div
                                                                        style={{
                                                                            textAlign: "left",
                                                                            marginBottom: "1rem",
                                                                        }}
                                                                    >
                                                                        {isLogin && !isChecked && (
                                                                            <>
                                                                                <br/>
                                                                                <a
                                                                                    onClick={priceRequest}
                                                                                    style={{
                                                                                        backgroundColor: "#15c39a",
                                                                                        borderColor: "#15c39a",
                                                                                        borderBottomColor: "#0ba480",
                                                                                        padding: "0.6rem",
                                                                                        paddingLeft: "4.4rem",
                                                                                        paddingRight: "4rem",
                                                                                        color: "#ffffff",
                                                                                        maxWidth: "300px",
                                                                                        borderRadius: "4px",
                                                                                        marginTop: "1rem",
                                                                                        cursor: "pointer",
                                                                                        boxShadow:
                                                                                            "0px 4px 8px rgba(0, 0, 0, 0.1)",
                                                                                    }}
                                                                                >
                                                                                    <span>Fiyat Teklifi İste</span>
                                                                                </a>
                                                                                <br/> <br/>
                                                                            </>
                                                                        )}
                                                                        {isLogin && isChecked && (
                                                                            <>
                                                                                <br/>
                                                                                <div
                                                                                    className="alert alert-info"
                                                                                    role="alert"
                                                                                >
                                                                                    Fiyat talebiniz alınmıştır
                                                                                </div>
                                                                            </>
                                                                        )}

                                                                        {!isLogin && (
                                                                            <>
                                                                                <br/>
                                                                                <br/>
                                                                                <a
                                                                                    href="/login"
                                                                                    style={{
                                                                                        fontWeight: "900",
                                                                                        color: "rgb(75,121,187)",
                                                                                        lineHeight: "1.2",
                                                                                        fontSize: "120%",
                                                                                        cursor: "pointer",
                                                                                    }}
                                                                                >
                                                                                    Fiyat teklifi almak için giriş
                                                                                    yapmalısınız
                                                                                </a>
                                                                                <br/>
                                                                                <br/>
                                                                                <br/>
                                                                            </>
                                                                        )}
                                                                    </div>
                                                                    <hr
                                                                        style={{borderBottom: "1px solid #000"}}
                                                                    />
                                                                    <p
                                                                        className="pro-title"
                                                                        style={{
                                                                            textAlign: "left",
                                                                            fontWeight: "bold",
                                                                            color: "#000",
                                                                            fontSize: "1em",
                                                                        }}
                                                                    >
                                                                        {" "}
                                                                        <span>
                                      SKU:
                                      <span style={{color: "gray"}}>
                                        {" "}
                                          {product.skuNo}
                                      </span>
                                    </span>
                                                                    </p>
                                                                    <p
                                                                        className="pro-title"
                                                                        style={{
                                                                            textAlign: "left",
                                                                            fontWeight: "bold",
                                                                            color: "#000",
                                                                            fontSize: "1em",
                                                                        }}
                                                                    >
                                                                        Kategori:
                                                                        <span style={{color: "gray"}}>
                                      {product.categoryName}
                                    </span>
                                                                    </p>
                                                                </div>
                                                                <br/>
                                                            </div>
                                                        </div>
                                                        <div className="col-lg-2 col-md-2 col-sm-12">
                                                            <Image
                                                                style={{
                                                                    textAlign: "right",
                                                                    position: "absolute",
                                                                    cursor: "pointer",
                                                                    opacity: "0.8",
                                                                }}
                                                                src={"me.png"}
                                                                width={"180"}
                                                                height={"70"}
                                                                loader={() =>
                                                                    `https://fabenapi.vevasoftprojects.com${product.brandLogo}`
                                                                }
                                                                alt="item-img"
                                                            />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div className="col-xl-2 col-lg-2 col-md-11"></div>
                </div>
            </main>
        </Wrapper>
    );
};

export default ProductPage;
