/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable react/no-unstable-nested-components */
/* eslint-disable react/jsx-no-useless-fragment */
/* eslint-disable react/jsx-fragments */
/* eslint-disable react/no-danger */
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/parallax";
import "swiper/css/pagination";

import { Carousel, IconList, LayoutContainer, MediaList } from "gordy-ui-lib";
import { Fragment, useEffect, useState } from "react";

import { DefaultVisualValues } from "@/@types/enums/visual-values";
import Spinner from "@/components/ui/spinner";
import { useServerDataCtx } from "@/providers/server-data-provider/server-data-provider";

import FlightTravelPlanner from "../modules/flight/travel-planner/components/flight-travel-planner";
import HotelTravelPlanner from "../modules/hotel/travel-planner/components/hotel-travel-planner";
import RentACarTravelPlanner from "../modules/rent-a-car/travel-planner/components/rent-a-car-travel-planner";
import TourTravelPlanner from "../modules/tour/travel-planner/components/tour-travel-planner";
import TransferTravelPlanner from "../modules/transfer/travel-planner/components/transfer-travel-planner";
import TravelPlannerBox from "../travel-planner/components/travel-planner/travel-planner-box";

export const COMPONENT_NAMES = {
  ATOM_PAGE: "Atom Page",
  TRAVEL_PLANNER_HOTEL: "Travel Planner Hotel",
  TRAVEL_PLANNER_TOUR: "Travel Planner Tour",
  TRAVEL_PLANNER_TRANSFER_AGENCY: "Travel Planner Transfer",
  TRAVEL_PLANNER_TRANSFER_CORPORATE: "Travel Planner Transfer Corporate",
  TRAVEL_PLANNER_FLIGHT: "Travel Planner Flight",
  TRAVEL_PLANNER_CAR_RENTAL_AGENCY: "Travel Planner Car Rental",
  TRAVEL_PLANNER_CAR_RENTAL_CORPORATE: "Travel Planner Car Rental Corporate",
  TAB_SLIDER: "Tab Slider",
  HEADER: "Header",
  TEXT_HTML: "HTML",
  ICON_LIST: "Icon List",
  MEDIA_LIST: "Media List",
  IMAGE_LIST: "Image List",
  FOOTER: "Footer",
};

const Cms = () => {
  // const cmsQuery = useCmsService({ path: props.path });
  const { pathValue } = useServerDataCtx();
  const { clientConfig } = useServerDataCtx();
  const [mounted, setMounted] = useState(false);

  const getVisualValues = () => {
    const atomPageVisual: any = pathValue?.result?.visual;
    const themeVisual: any = clientConfig?.properties;
    const style = atomPageVisual?.style;
    return {
      enableHeaderFooter: atomPageVisual?.enableHeaderFooter || false,
      link: {
        name: atomPageVisual?.link?.name || themeVisual?.link?.name,
        style: atomPageVisual?.link?.style || themeVisual?.textDecorationLine,
        color: atomPageVisual?.link?.color || themeVisual?.linkcolor,
      },
      ...style,
      fontSize: style?.fontSize || DefaultVisualValues.fontSize,
      fontFamily: style?.fontFamily || themeVisual.fontFamily,
      backgroundColor:
        style?.backgroundColor || DefaultVisualValues.backgroundColor,
      componentMargin:
        style?.componentMargin || DefaultVisualValues.componentMargin,
      borderRadius:
        style?.borderRadius || clientConfig?.properties?.borderRadius,
      button: {
        backgroundColor: clientConfig?.properties?.color,
        borderColor: clientConfig?.properties?.color,
      },
    };
  };

  if (!pathValue?.result) {
    return <Spinner />;
  }

  const visualValues = getVisualValues();

  const components: any = {
    [COMPONENT_NAMES.TAB_SLIDER]: (strategy: any) => {
      return <Carousel strategy={strategy} design={visualValues} />;
    },
    [COMPONENT_NAMES.ICON_LIST]: (strategy: any) => {
      return <IconList strategy={strategy} design={visualValues} />;
    },
    [COMPONENT_NAMES.TEXT_HTML]: (strategy: any) => {
      return (
        <div
          style={{
            ...strategy?.visual?.style,
            ...{
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundRepeat: "no-repeat",
              backgroundImage: strategy.data?.backgroundImagePath
                ? `url("${strategy.data.backgroundImagePath}")`
                : undefined,
            },
            height:
              strategy?.visual?.style?.height === 0
                ? undefined
                : strategy?.visual?.style?.height,
          }}
        >
          <div className="container space-y-4">
            {strategy.data?.title && (
              <h3 style={strategy.data.titleStyle}>{strategy.data.title}</h3>
            )}
            <div
              dangerouslySetInnerHTML={{
                __html: strategy.data?.html,
              }}
            />
          </div>
        </div>
      );
    },
    [COMPONENT_NAMES.TRAVEL_PLANNER_HOTEL]: (strategy: any) => {
      return (
        <TravelPlannerBox
          contentData={{
            subTitle: strategy.data.subTitle,
            title: strategy.data.title,
            titleStyle: strategy.data.titleStyle,
            subTitleStyle: strategy.data.subTitleStyle,
            backgroundImagePath: strategy.data.backgroundImagePath,
            backgroundColor: strategy.visual?.style?.backgroundColor,
          }}
        >
          <HotelTravelPlanner />
        </TravelPlannerBox>
      );
    },
    [COMPONENT_NAMES.TRAVEL_PLANNER_TOUR]: (strategy: any) => {
      return (
        <TravelPlannerBox
          contentData={{
            subTitle: strategy.data.subTitle,
            title: strategy.data.title,
            titleStyle: strategy.data.titleStyle,
            subTitleStyle: strategy.data.subTitleStyle,
            backgroundImagePath: strategy.data.backgroundImagePath,
            backgroundColor: strategy.visual?.style?.backgroundColor,
          }}
        >
          <TourTravelPlanner />
        </TravelPlannerBox>
      );
    },
    [COMPONENT_NAMES.TRAVEL_PLANNER_FLIGHT]: (strategy: any) => {
      return (
        <TravelPlannerBox
          contentData={{
            subTitle: strategy.data.subTitle,
            title: strategy.data.title,
            titleStyle: strategy.data.titleStyle,
            subTitleStyle: strategy.data.subTitleStyle,
            backgroundImagePath: strategy.data.backgroundImagePath,
            backgroundColor: strategy.visual?.style?.backgroundColor,
          }}
        >
          <FlightTravelPlanner />
        </TravelPlannerBox>
      );
    },
    [COMPONENT_NAMES.TRAVEL_PLANNER_TRANSFER_AGENCY]: (strategy: any) => {
      return (
        <TravelPlannerBox
          contentData={{
            subTitle: strategy.data.subTitle,
            title: strategy.data.title,
            titleStyle: strategy.data.titleStyle,
            subTitleStyle: strategy.data.subTitleStyle,
            backgroundImagePath: strategy.data.backgroundImagePath,
            backgroundColor: strategy.visual?.style?.backgroundColor,
          }}
        >
          <TransferTravelPlanner />
        </TravelPlannerBox>
      );
    },
    [COMPONENT_NAMES.TRAVEL_PLANNER_CAR_RENTAL_AGENCY]: (strategy: any) => {
      return (
        <TravelPlannerBox
          contentData={{
            subTitle: strategy.data.subTitle,
            title: strategy.data.title,
            titleStyle: strategy.data.titleStyle,
            subTitleStyle: strategy.data.subTitleStyle,
            backgroundImagePath: strategy.data.backgroundImagePath,
            backgroundColor: strategy.visual?.style?.backgroundColor,
          }}
        >
          <RentACarTravelPlanner />
        </TravelPlannerBox>
      );
    },
    [COMPONENT_NAMES.MEDIA_LIST]: (strategy: any) => {
      return <MediaList strategy={strategy} design={visualValues} />;
    },
  };

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <div />;
  }

  return (
    <Fragment>
      <LayoutContainer
        style={{
          margin: "0 auto",
          backgroundColor: visualValues?.backgroundColor,
          fontFamily: `"${visualValues?.fontFamily}"`,
        }}
      >
        {!!pathValue?.result &&
          pathValue?.result?.children &&
          pathValue?.result?.children.map((component: any) => (
            <Fragment key={component.code}>
              <div
                style={{
                  margin: `${visualValues.componentMargin / 2}px`,
                }}
              >
                {components[`${component.name}` as any]?.(component)}
              </div>
            </Fragment>
          ))}
      </LayoutContainer>
    </Fragment>
  );
};

export default Cms;