/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useState } from "react";
import RoundedDiv from "@/components/elements/RoundedDiv";
import { IAdvertisingProfile } from "@/types/types";
import RoundedButton from "@/components/elements/RoundedButton";
import AdProfileContentPosts from "./AdProfileContentPosts";
import BillboardServicesModal from "../BillboardPage/BillboardServicesModal";
import BillboardFeaturesModal from "../BillboardPage/BillboardFeaturesModal";
import BillboardContactInfoModal from "../BillboardPage/BillboardContactInfoModal";
import BillboardLocationModal from "../MainBillboardCard/BillboardLocationModal";

function AdProfileContent({ profile }: { profile: IAdvertisingProfile }) {
  const [showServicesModal, setShowServicesModal] = useState<boolean>(false);
  const [showFeaturesModal, setShowFeaturesModal] = useState<boolean>(false);
  const [showContactInfoModal, setShowContactInfoModal] = useState<boolean>(false);
  const [showLocationModal, setShowLocationModal] = useState<boolean>(false);

  const { allServices, allFeatures, contactInfo, address, lat, lng, allImages } = profile;

  return (
    <div className="px-4 py-2 w-full text-xs md:text-sm font-semibold">
      <div className="grid grid-cols-3 gap-1 md:gap-4">
        <RoundedDiv className="text-[12px] md:text-sm h-7 md:h-8">
          {profile?.city?.name ? profile?.city?.name : "شهر"}
        </RoundedDiv>
        <RoundedDiv className="text-[12px] md:text-sm h-7 md:h-8">
          {profile?.neighbourhood ? profile?.neighbourhood : "محله"}
        </RoundedDiv>
        <RoundedButton
          onClick={() => setShowLocationModal(true)}
          className="text-[12px] md:text-sm h-7 md:h-8"
        >
          آدرس و لوکیشن
        </RoundedButton>
      </div>
      <div className="grid grid-cols-3 gap-1 md:gap-4 mt-4">
        <RoundedButton
          onClick={() => setShowServicesModal(true)}
          className="text-[12px] md:text-sm h-7 md:h-8"
        >
          خدمات و کالا
        </RoundedButton>
        <RoundedButton
          onClick={() => setShowFeaturesModal(true)}
          className="text-[12px] md:text-sm h-7 md:h-8"
        >
          امکانات
        </RoundedButton>
        <RoundedButton
          onClick={() => setShowContactInfoModal(true)}
          className="text-[12px] md:text-sm h-7 md:h-8"
        >
          تماس
        </RoundedButton>
      </div>
      <AdProfileContentPosts allImages={allImages} />

      {showServicesModal && allServices && (
        <BillboardServicesModal
          showServicesModal={showServicesModal}
          setShowServicesModal={setShowServicesModal}
          services={allServices}
        />
      )}
      {showFeaturesModal && allFeatures && (
        <BillboardFeaturesModal
          showFeaturesModal={showFeaturesModal}
          setShowFeaturesModal={setShowFeaturesModal}
          features={allFeatures}
        />
      )}
      {showContactInfoModal && contactInfo && (
        <BillboardContactInfoModal
          showContactInfoModal={showContactInfoModal}
          setShowContactInfoModal={setShowContactInfoModal}
          contactInfo={contactInfo}
        />
      )}
      {showLocationModal && lat && lng && (
        <BillboardLocationModal
          showLocationModal={showLocationModal}
          setShowLocationModal={setShowLocationModal}
          lat={Number(lat)}
          lng={Number(lng)}
          address={address || ""}
        />
      )}
    </div>
  );
}

export default AdProfileContent;