// import { useCallback, useEffect, useState } from 'react'

// import {
//   BaseExtension,
//   Compatibility,
//   InstallationState,
//   abortDownload,
// } from '@janhq/core'
// import { Button, Progress, Tooltip } from '@janhq/joi'

// import { InfoCircledIcon } from '@radix-ui/react-icons'
// import { useAtomValue } from 'jotai'

// import { markdownParser } from '@/utils/markdown-parser'

// import { extensionManager } from '@/extension'
// import { installingExtensionAtom } from '@/helpers/atoms/Extension.atom'

// type Props = {
//   item: BaseExtension
// }

// const ExtensionItem: React.FC<Props> = ({ item }) => {
//   const [compatibility, setCompatibility] = useState<Compatibility | undefined>(
//     undefined
//   )
//   const [installState, setInstallState] =
//     useState<InstallationState>('NotRequired')
//   const installingExtensions = useAtomValue(installingExtensionAtom)
//   const isInstalling = installingExtensions.some(
//     (e) => e.extensionId === item.name
//   )

// const progress = isInstalling
//   ? (installingExtensions.find((e) => e.extensionId === item.name)
//       ?.percentage ?? -1)
//   : -1

//   useEffect(() => {
//     const getExtensionInstallationState = async () => {
//       const extension = extensionManager.getByName(item.name)
//       if (!extension) return

//       if (typeof extension?.installationState === 'function') {
//         const installState = await extension.installationState()
//         setInstallState(installState)
//       }
//     }

//     getExtensionInstallationState()
//   }, [item.name, isInstalling])

//   useEffect(() => {
//     const extension = extensionManager.getByName(item.name)
//     if (!extension) return
//     setCompatibility(extension.compatibility())
//   }, [setCompatibility, item.name])

//   const onInstallClick = useCallback(async () => {
//     const extension = extensionManager.getByName(item.name)
//     if (!extension) return

//     await extension.install()
//   }, [item.name])

//   const onCancelInstallingClick = () => {
//     const extension = installingExtensions.find(
//       (e) => e.extensionId === item.name
//     )
//     if (extension?.localPath) {
//       abortDownload(extension.localPath)
//     }
//   }

//   const description = markdownParser.parse(item.description ?? '', {
//     async: false,
//   })

//   return (
//     <div className="mx-4 flex items-start justify-between border-b border-[hsla(var(--app-border))] py-6 first:pt-4 last:border-none">
//       <div className="flex-1 flex-shrink-0 space-y-1">
//         <div className="flex items-center gap-x-2">
//           <h6 className="font-semibold">Additional Dependencies</h6>
//         </div>
//         <div
//           dangerouslySetInnerHTML={{ __html: description }}
//           className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
//         />
//       </div>

//       <div className="flex min-w-[150px] flex-row justify-end">
//         <InstallStateIndicator
//           installProgress={progress}
//           installState={installState}
//           compatibility={compatibility}
//           onInstallClick={onInstallClick}
//           onCancelClick={onCancelInstallingClick}
//         />
//       </div>
//     </div>
//   )
// }

// type InstallStateProps = {
//   installProgress: number
//   compatibility?: Compatibility
//   installState: InstallationState
//   onInstallClick: () => void
//   onCancelClick: () => void
// }

// const InstallStateIndicator: React.FC<InstallStateProps> = ({
//   installProgress,
//   compatibility,
//   installState,
//   onInstallClick,
//   onCancelClick,
// }) => {
//   if (installProgress !== -1) {
//     const progress = installProgress * 100
//     return (
//       <div className="text-primary dark flex h-10 flex-row items-center justify-center space-x-2 rounded-lg px-4">
//         <button onClick={onCancelClick} className="text-primary font-semibold">
//           Cancel
//         </button>
//         <div className="flex w-[113px] flex-row items-center justify-center space-x-2 rounded-md px-2 py-[2px]">
//           <Progress className="h-1 w-[69px]" value={progress} />
//           <span className="text-primary text-xs font-bold">
//             {progress.toFixed(0)}%
//           </span>
//         </div>
//       </div>
//     )
//   }

//   switch (installState) {
//     case 'Installed':
//       return (
//         <div className="rounded-md px-3 py-1.5 font-semibold text-[hsla(var(--text-secondary))]">
//           Installed
//         </div>
//       )
//     case 'NotCompatible':
//       return (
//         <div className="rounded-md px-3 py-1.5 font-semibold text-[hsla(var(--text-secondary))]">
//           <div className="flex flex-row items-center justify-center gap-1">
//             Incompatible
//             <Tooltip
//               trigger={
//                 <InfoCircledIcon className="cursor-pointer text-[hsla(var(--text-secondary))]" />
//               }
//               content={
//                 compatibility &&
//                 !compatibility['platform']?.includes(PLATFORM) ? (
//                   <span>
//                     Only available on&nbsp;
//                     {compatibility?.platform
//                       ?.map((e: string) =>
//                         e === 'win32'
//                           ? 'Windows'
//                           : e === 'linux'
//                             ? 'Linux'
//                             : 'MacOS'
//                       )
//                       .join(', ')}
//                   </span>
//                 ) : (
//                   <span>Your GPUs are not compatible with this extension</span>
//                 )
//               }
//             />
//           </div>
//         </div>
//       )
//     case 'NotInstalled':
//       return (
//         <Button size="small" variant="soft" onClick={onInstallClick}>
//           Install
//         </Button>
//       )
//     default:
//       return <div></div>
//   }
// }

// export default ExtensionItem