"use client";

import RoundedButton from "@/components/elements/RoundedButton";
import { IContactInfo, IFeature, Service } from "@/types/types";
import React, { useState } from "react";
import Rate from "rc-rate";
import "rc-rate/assets/index.css";
import "@/styles/rc-rate-custom.css";
import Image from "next/image";
import useAxios from "@/hooks/useAxios";
import BillboardServicesModal from "./BillboardServicesModal";
import BillboardFeaturesModal from "./BillboardFeaturesModal";
import BillboardContactInfoModal from "./BillboardContactInfoModal";
import BillboardDescriptionModal from "./BillboardDescriptionModal";
import ShowMap from "@/components/main/ShowMap";
import DirectionMapModal from "@/components/main/DirectionMapModal";

function BillboardDetails({
  services,
  features,
  contactInfo,
  description,
  lat,
  lng,
  _id,
  noDirection,
}: {
  services?: Service[];
  features?: IFeature[];
  contactInfo?: IContactInfo;
  description?: string | null;
  lat?: string | number | undefined;
  lng?: string | number | undefined;
  _id: string;
  noDirection?: boolean;
}) {
  const { request } = useAxios();
  const [rating, setRating] = useState<number>(0);
  const [showServicesModal, setShowServicesModal] = useState<boolean>(false);
  const [showFeaturesModal, setShowFeaturesModal] = useState<boolean>(false);
  const [showContactInfoModal, setShowContactInfoModal] =
    useState<boolean>(false);
  const [showDescriptionModal, setShowDescriptionModal] =
    useState<boolean>(false);
  const [showNavigationModal, setShowNavigationModal] =
    useState<boolean>(false);

  const submitRateHandler = async () => {
    try {
      await request("POST", "/advertising/rate", {
        rating: rating,
        advertisingId: _id,
      });
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // lat و lng جابجاست
  const correctedLat = Number(lng);
  const correctedLng = Number(lat);

  return (
    <div className="flex flex-col mt-6">
      <div className="flex items-center justify-center gap-4">
        <Rate
          value={rating}
          onChange={(value) => setRating(value)}
          count={5}
          style={{ fontSize: "28px" }}
        />
        <div onClick={submitRateHandler}>
          <Image
            width={24}
            height={24}
            alt={"submit.svg"}
            src={`/images/icons/submit.svg`}
            className="dark:invert"
          />
        </div>
      </div>
      <div className="grid grid-cols-2 gap-4 mt-4">
        <RoundedButton
          onClick={() => setShowServicesModal(true)}
          className="text-[#00C1C2] border-[#00C1C2] h-9 mx-auto w-full"
        >
          لیست خدمات و کالا
        </RoundedButton>
        <RoundedButton
          onClick={() => setShowFeaturesModal(true)}
          className="text-[#00C1C2] border-[#00C1C2] h-9 mx-auto w-full"
        >
          سایر امکانات
        </RoundedButton>
        <RoundedButton
          onClick={() => setShowContactInfoModal(true)}
          className="text-[#00C1C2] border-[#00C1C2] h-9 mx-auto w-full"
        >
          نمایش تماس
        </RoundedButton>
        <RoundedButton
          onClick={() => setShowDescriptionModal(true)}
          className="text-[#00C1C2] border-[#00C1C2] h-9 mx-auto w-full"
        >
          توضیحات
        </RoundedButton>
      </div>
      {showServicesModal && services && (
        <BillboardServicesModal
          showServicesModal={showServicesModal}
          setShowServicesModal={setShowServicesModal}
          services={services}
        />
      )}
      {showFeaturesModal && features && (
        <BillboardFeaturesModal
          showFeaturesModal={showFeaturesModal}
          setShowFeaturesModal={setShowFeaturesModal}
          features={features}
        />
      )}
      {showContactInfoModal && contactInfo && (
        <BillboardContactInfoModal
          showContactInfoModal={showContactInfoModal}
          setShowContactInfoModal={setShowContactInfoModal}
          contactInfo={contactInfo}
        />
      )}
      {showDescriptionModal && (
        <BillboardDescriptionModal
          showDescriptionModal={showDescriptionModal}
          setShowDescriptionModal={setShowDescriptionModal}
          description={description}
        />
      )}
      {lat && lng && lat !== "undefined" && lng !== "undefined" && (
        <div className="my-5 rounded-xl overflow-hidden">
          <ShowMap lat={lat} lng={lng} height="200px" />
        </div>
      )}
      {showNavigationModal && (
        <DirectionMapModal
          showNavigationModal={showNavigationModal}
          setShowNavigationModal={setShowNavigationModal}
          correctedLat={correctedLat}
          correctedLng={correctedLng}
        />
      )}
      {!noDirection && (
        <RoundedButton
          onClick={() => setShowNavigationModal(true)}
          className="h-9 mx-auto px-10"
        >
          مسیریابی
        </RoundedButton>
      )}
    </div>
  );
}

export default BillboardDetails;
