135 lines
5.1 KiB
TypeScript

'use client'
import React, { useMemo, useState } from 'react'
import { RiInformation2Line } from '@remixicon/react'
import Card from '../../card'
import { extensionDallE, modelGPT4, toolNotion } from '../../card/card-mock'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Checkbox from '@/app/components/base/checkbox'
import Badge, { BadgeState } from '@/app/components/base/badge/index'
type InstallFromMarketplaceProps = {
onClose: () => void
}
const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose }) => {
const plugins = useMemo(() => [toolNotion, extensionDallE, modelGPT4], [])
const [selectedPlugins, setSelectedPlugins] = useState<Set<number>>(new Set())
const [isInstalling, setIsInstalling] = useState(false)
const [nextStep, setNextStep] = useState(false)
const mockInstall = async () => {
setIsInstalling(true)
await new Promise(resolve => setTimeout(resolve, 1500))
setIsInstalling(false)
}
const pluginsToShow = useMemo(() => {
if (plugins.length === 1 || (nextStep && selectedPlugins.size === 1))
return plugins.length === 1 ? plugins : plugins.filter((_, index) => selectedPlugins.has(index))
return nextStep ? plugins.filter((_, index) => selectedPlugins.has(index)) : plugins
}, [plugins, nextStep, selectedPlugins])
const renderPluginCard = (plugin: any, index: number) => (
<Card
key={index}
installed={nextStep && !isInstalling}
payload={plugin}
className='w-full'
titleLeft={
plugin.version === plugin.latest_version
? (
<Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge>
)
: (
<>
<Badge className='mx-1' size="s" state={BadgeState.Warning}>
{`${plugin.version} -> ${plugin.latest_version}`}
</Badge>
<div className='flex px-0.5 justify-center items-center gap-0.5'>
<div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
<RiInformation2Line className='w-4 h-4 text-text-tertiary' />
</div>
</>
)
}
/>
)
return (
<Modal
isShow={true}
onClose={onClose}
className='flex min-w-[560px] flex-col items-start p-0 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl'
closable
>
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
<div className='self-stretch text-text-primary title-2xl-semi-bold'>
{nextStep ? (isInstalling ? 'Install plugin' : 'Installation successful') : 'Install plugin'}
</div>
</div>
<div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
<div className='flex flex-col items-start gap-2 self-stretch'>
<div className='text-text-secondary system-md-regular'>
{(nextStep && !isInstalling)
? `The following ${pluginsToShow.length === 1 ? 'plugin has' : `${pluginsToShow.length} plugins have`} been installed successfully`
: `About to install the following ${pluginsToShow.length === 1 ? 'plugin' : `${pluginsToShow.length} plugins`}`}
</div>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
{pluginsToShow.map((plugin, index) => (
<div key={index} className={`flex ${(plugins.length > 1 && !nextStep) ? 'pl-1 items-center gap-2' : ''} flex-grow`}>
{(plugins.length > 1 && !nextStep) && (
<Checkbox
checked={selectedPlugins.has(index)}
onCheck={() => {
const newSelectedPlugins = new Set(selectedPlugins)
newSelectedPlugins.has(index) ? newSelectedPlugins.delete(index) : newSelectedPlugins.add(index)
setSelectedPlugins(newSelectedPlugins)
}}
/>
)}
{renderPluginCard(plugin, index)}
</div>
))}
</div>
</div>
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
{nextStep
? (
<Button
variant='primary'
disabled={isInstalling}
loading={isInstalling}
onClick={onClose}
>
{isInstalling ? 'Installing...' : 'Close'}
</Button>
)
: (
<>
<Button variant='secondary' className='min-w-[72px]' onClick={onClose}>
Cancel
</Button>
<Button
variant='primary'
className='min-w-[72px]'
disabled={plugins.length > 1 && selectedPlugins.size < 1}
onClick={() => {
setNextStep(true)
mockInstall()
}}
>
Install
</Button>
</>
)}
</div>
</Modal>
)
}
export default InstallFromMarketplace