"use client";

import { AnimatePresence, motion } from "motion/react";
import { fadeScale } from "@/lib/variants";
import { TypeCartillaResults } from "./types";
import { ResultsItem } from "./cartilla-results-item";
import { MapComponent } from "./cartilla-results-map";
import { useState } from "react";
import { CartillaModal } from "./cartilla-results-modal";

type CartillaResultsContentProps = {
  results: TypeCartillaResults;
  selectedTab: string;
};

const CartillaResultsContent = ({ results, selectedTab }: CartillaResultsContentProps) => {
  const [isModalOpen, setModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState<string[]>([]);

  const handleModalContent = (content: string[]) => {
    setModalContent(content);
    setModalOpen(true);
  };

  const renderView = () => {
    if (selectedTab === "Ver lista") {
      return (
        <div className="bg-white rounded-[1.875rem] px-7 divide-[#D9D9D9] divide-y overflow-auto scrollbar-contigo grid">
          {results?.data?.map((center) => (
            <ResultsItem key={center.nombreDomicilio} element={center} handleClick={handleModalContent} />
          ))}
        </div>
      );
    }

    return (
      <div className="aspect-16/6 bg-gray-300 rounded-[1.875rem] flex items-center justify-center">
        <MapComponent locations={results.data} handleClick={handleModalContent} />
      </div>
    );
  };

  return (
    <div className="pt-3 pb-6">
      <p className="text-[0.7813rem] md:text-[1.125rem] mb-5 w-fit">
        Se encontraron {results?.data?.length} resultados
      </p>

      <AnimatePresence mode="wait">
        <motion.div key={selectedTab} variants={fadeScale()} initial="initial" animate="animate" exit="exit">
          {renderView()}
        </motion.div>
      </AnimatePresence>
      <AnimatePresence>
        {isModalOpen && <CartillaModal setModal={setModalOpen} content={modalContent} />}
      </AnimatePresence>
    </div>
  );
};

export default CartillaResultsContent;