import { Button, chakra, Divider, Heading, HStack, Modal, ModalBody, ModalContent, ModalOverlay, Stack, Tooltip, useToast, } from '@chakra-ui/react' import { ExternalLinkIcon } from 'assets/icons' import { TypebotViewer } from 'bot-engine' import { Typebot } from 'models' import React, { useEffect, useState } from 'react' import { parseTypebotToPublicTypebot } from 'services/publicTypebot' import { sendRequest } from 'utils' import { TemplateProps, templates } from './data' type Props = { isOpen: boolean onClose: () => void onTypebotChoose: (typebot: Typebot) => void } export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => { const [typebot, setTypebot] = useState() const [selectedTemplate, setSelectedTemplate] = useState( templates[0] ) const [isLoading, setIsLoading] = useState(false) const toast = useToast({ position: 'top-right', status: 'error', }) useEffect(() => { fetchTemplate(templates[0]) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const fetchTemplate = async (template: TemplateProps) => { setSelectedTemplate(template) const { data, error } = await sendRequest(`/templates/${template.fileName}`) if (error) return toast({ title: error.name, description: error.message }) setTypebot(data as Typebot) } return ( {selectedTemplate.emoji}{' '} {selectedTemplate.name} {typebot && ( )} {templates.map((template) => ( ))} ) }