import React, { useState, useEffect } from "react";
import { TabContent, TabPane, Nav, NavItem, NavLink, Row } from "reactstrap";
import classnames from "classnames";
import Link from "next/link";
import Image from "next/image";
import { useTranslation } from "next-i18next";

const ClickHandler = () => {
  window.scrollTo(0, 0);
};

const ServiceSectionS2 = () => {
  const { t, i18n } = useTranslation("services");

  // Get campaigns array from the translation JSON
  const campaigns = t("campaigns", { returnObjects: true });

  // Extract unique categories from the campaigns dynamically
  const categories = [...new Set(campaigns.map((service) => service.category))];

  // Default active tab is the first category, but we will set it dynamically based on the language
  const [activeTab, setActiveTab] = useState(categories[0]);

  // Function to change the active tab based on the selected language
  const changeActiveTabOnLanguageChange = () => {
    // Set the active tab to the first category whenever the language changes
    setActiveTab(categories[0]);
  };

  // Track language changes using the `useEffect` hook
  useEffect(() => {
    // Whenever the language changes, reset the active tab
    changeActiveTabOnLanguageChange();
  }, [i18n.language]); // `i18n.language` triggers the effect when the language changes

  const toggle = (tab) => {
    if (activeTab !== tab) setActiveTab(tab);
  };

  return (
    <div className="wpo-campaign-area-s4 section-padding">
      <div className="container">
        <div className="wpo-campaign-wrap">
          {/* Tab Navigation */}
          <Nav tabs>
            {categories.slice(0, 5).map((cat, idx) => (
              <NavItem key={idx}>
                <NavLink
                  className={classnames({ active: activeTab === cat })}
                  onClick={() => toggle(cat)}
                >
                  {cat}
                </NavLink>
              </NavItem>
            ))}
          </Nav>

          {/* Tab Content */}
          <TabContent activeTab={activeTab}>
            {categories.map((cat, idx) => (
              <TabPane tabId={cat} key={idx}>
                <Row>
                  {/* Filter campaigns based on category */}
                  {campaigns
                    .filter((srv) => srv.category === cat)
                    .slice(0, 3) // Limit to 3 services per category
                    .map((service, srvIdx) => (
                      <div className="col-lg-4 col-md-6 col-12" key={srvIdx}>
                        <div className="wpo-campaign-single">
                          <div className="wpo-campaign-item">
                            <div className="wpo-campaign-img">
                              <Image
                                src={service.sImgS} // Service Image
                                alt={service.sTitle} // Service Title for Alt text
                                width={400}
                                height={250}
                              />
                            </div>
                            <div className="wpo-campaign-content">
                              <div className="wpo-campaign-text-top">
                                <h2>
                                  <Link
                                    onClick={ClickHandler}
                                    href={`/service-single/[slug]`}
                                    as={`/service-single/${service.slug}`} // Dynamic slug
                                  >
                                    {service.sTitle} {/* Service Title */}
                                  </Link>
                                </h2>
                                <p
                                  dangerouslySetInnerHTML={{
                                    __html:
                                      service.description.length > 100
                                        ? service.description.substring(0, 100) + "..."
                                        : service.description,
                                  }}
                                ></p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                </Row>
              </TabPane>
            ))}
          </TabContent>
        </div>
      </div>
    </div>
  );
};

export default ServiceSectionS2;