"use client";

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs/tabs";
import { useLocale } from "@/hooks/useLocale";
import type { RoomCollectionResult } from "@/services/eva-display/hotel/hotel-detail/hotel-detail-services.types";

import useRoomSelect from "../../hooks/use-room-select";
import RezervationSummary from "../reservation-summary/reservation-summary";
import RoomInfo from "../room-info/room-info";

export interface MultipleRoomInfoProps {
  data: RoomCollectionResult[];
  primaryButtonOnClick?(selectedRoom: any): void;
}

const MultipleRoomInfo = ({
  data,
  primaryButtonOnClick,
}: MultipleRoomInfoProps) => {
  const { state, setRoomActiveTab } = useRoomSelect();
  const { t } = useLocale();
  return (
    <Tabs
      defaultValue={state.activeTab?.toString()}
      value={state.activeTab?.toString()}
      className="!items-start !justify-start"
    >
      <TabsList className="relative !items-start !justify-start bg-gray-50">
        {Array.from({ length: state.roomCount }).map((_, index: number) => (
          <TabsTrigger
            onClick={() => setRoomActiveTab(index + 1)}
            key={+(index + 1)}
            className="!h-8 !border border-gray-300 px-5 !text-gray-500 data-[state=active]:!border data-[state=active]:!border-gray-800 data-[state=active]:!text-gray-800"
            value={(index + 1).toString()}
          >
            {index + 1}
            {t(". Room")}
          </TabsTrigger>
        ))}
        {/* <TabsTrigger
          className="!h-8 !border !border-r-0 border-gray-300 px-5 !text-gray-500 after:absolute after:left-[39%] after:h-8 after:w-[1.4rem] after:border-y after:border-gray-300  data-[state=active]:!border data-[state=active]:!border-r-0 data-[state=active]:!border-gray-800 data-[state=active]:!text-gray-800 data-[state=active]:after:left-[33.9%] data-[state=active]:after:h-[1.4rem] data-[state=active]:after:rotate-45 data-[state=active]:after:!border-b-0 data-[state=active]:after:border-r data-[state=active]:after:border-t data-[state=active]:after:!border-gray-800 data-[state=active]:after:content-[''] "
          value="1"
        >
          1.Oda
        </TabsTrigger>
        <TabsTrigger
          className="ml-4 !border !border-l-0 border-gray-300 px-8 !text-gray-500 after:absolute after:left-[40%] after:h-8 after:w-[1.4rem] after:border-y after:border-gray-300 data-[state=active]:!border data-[state=active]:!border-l-0 data-[state=active]:!border-gray-800  data-[state=active]:!text-gray-800 data-[state=active]:after:left-[45%] data-[state=active]:after:h-[1.4rem] data-[state=active]:after:rotate-45 data-[state=active]:after:!border-b-0 data-[state=active]:after:border-r data-[state=active]:after:border-t data-[state=active]:after:!border-gray-800 data-[state=active]:after:content-['']"
          value="2"
        >
          2.Oda
        </TabsTrigger> */}
      </TabsList>
      <div className="flex gap-4">
        {Array.from({ length: state.roomCount }).map((_, index: number) => (
          <TabsContent key={+index} value={(index + 1).toString()}>
            <div className="flex flex-col gap-4">
              {data.map((item) => (
                <RoomInfo key={item.roomId} roomInfo={item} />
              ))}
            </div>
          </TabsContent>
        ))}
        <RezervationSummary primaryButtonOnClick={primaryButtonOnClick} />
      </div>
    </Tabs>
  );
};

export default MultipleRoomInfo;