import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { SVGComponent } from "@calcom/types/SVGComponent"; import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter, Input } from "@calcom/ui"; import { Link, Search } from "@calcom/ui/components/icon"; interface ISearchDialog { isOpenDialog: boolean; setIsOpenDialog: Dispatch>; onSave: (url: string) => void; } const MODE_SEARCH = "search" as const; const MODE_URL = "url" as const; type Mode = typeof MODE_SEARCH | typeof MODE_URL; export const SearchDialog = (props: ISearchDialog) => { const { t } = useLocale(); const [gifImage, setGifImage] = useState(""); const [nextOffset, setNextOffset] = useState(0); const [keyword, setKeyword] = useState(""); const { isOpenDialog, setIsOpenDialog } = props; const [isLoading, setIsLoading] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const [selectedMode, setSelectedMode] = useState(MODE_SEARCH); const searchGiphy = async (keyword: string, offset: number) => { if (isLoading) { return; } setIsLoading(true); setErrorMessage(""); const res = await fetch("/api/integrations/giphy/search", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ keyword, offset, }), }); const json = await res.json(); if (!res.ok) { setErrorMessage(json?.message || "Something went wrong"); } else { setGifImage(json.image || ""); setNextOffset(json.nextOffset); if (!json.image) { setErrorMessage("No Result found"); } } setIsLoading(false); return null; }; const getGiphyByUrl = async (url: string) => { if (isLoading) { return; } setIsLoading(true); setErrorMessage(""); const res = await fetch("/api/integrations/giphy/get", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ url, }), }); const json = await res.json(); if (!res.ok) { setErrorMessage(json?.message || json?.[0]?.message || "Something went wrong"); } else { setGifImage(json.image || ""); if (!json.image) { setErrorMessage("No Result found"); } } setIsLoading(false); return null; }; const renderTab = (Icon: SVGComponent, text: string, mode: Mode) => (
{ setKeyword(""); setGifImage(""); setSelectedMode(mode); }}> {text}
); const handleFormSubmit = async (event: React.SyntheticEvent) => { event.stopPropagation(); event.preventDefault(); if (selectedMode === MODE_SEARCH) { searchGiphy(keyword, 0); } else if (selectedMode === MODE_URL) { getGiphyByUrl(keyword); } }; return (

{t("find_gif_spice_confirmation")}

{renderTab(Search, t("search_giphy"), MODE_SEARCH)} {renderTab(Link, t("add_link_from_giphy"), MODE_URL)}
{ setKeyword(event.target.value); }} />
{gifImage && (
{isLoading ? (
) : ( {`Gif )}
)} {errorMessage && } {gifImage && selectedMode === MODE_SEARCH && (
Not the perfect GIF?
)} { props.setIsOpenDialog(false); }}> {t("cancel")}
); };