From 276ef09884a8fd4ede1d702dc43cfbfbad7ecf7f Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com>
Date: Fri, 5 Jan 2024 11:36:52 +0800
Subject: [PATCH] [TRAH] Hamza / TRAH-2615 /Added Carousel component (#12738)

* chore: added carousel component

* chore: removed the types

* chore: removed the code smells

* chore: added default value

* chore: added default value v2
---
 .../CompareAccountsCarousel.tsx               | 43 +++++++++++++++++++
 .../CompareAccountsCarouselButton.tsx         | 27 ++++++++++++
 .../CompareAccountsCarousel/index.ts          |  1 +
 3 files changed, 71 insertions(+)
 create mode 100644 packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx
 create mode 100644 packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx
 create mode 100644 packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/index.ts

diff --git a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx
new file mode 100644
index 000000000000..9b85b4ec4646
--- /dev/null
+++ b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx
@@ -0,0 +1,43 @@
+import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import useEmblaCarousel, { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel-react';
+import CFDCompareAccountsCarouselButton from './CompareAccountsCarouselButton';
+
+const CompareAccountsCarousel = ({ children }: PropsWithChildren) => {
+    const options: EmblaOptionsType = {
+        align: 0,
+        containScroll: 'trimSnaps',
+    };
+    const [emblaRef, emblaApi] = useEmblaCarousel(options);
+    const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+    const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+
+    const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setPrevBtnEnabled(emblaApi.canScrollPrev());
+        setNextBtnEnabled(emblaApi.canScrollNext());
+    }, []);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect);
+        emblaApi.on('select', onSelect);
+    }, [emblaApi, onSelect]);
+
+    return (
+        <div className='relative overflow-hidden'>
+            <div className='w-full h-full overflow-hidden pb-3000' ref={emblaRef}>
+                <div className='flex flex-row invisible max-h-screen ease-in-out duration-0 -ml-500 touch-pan-y'>
+                    {children}
+                </div>
+            </div>
+            <CFDCompareAccountsCarouselButton enabled={prevBtnEnabled} onClick={scrollPrev} />
+            <CFDCompareAccountsCarouselButton enabled={nextBtnEnabled} isNext onClick={scrollNext} />
+        </div>
+    );
+};
+
+export default CompareAccountsCarousel;
diff --git a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx
new file mode 100644
index 000000000000..f8898a4b87f9
--- /dev/null
+++ b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { IconButton, qtMerge } from '@deriv/quill-design';
+import { LabelPairedChevronLeftMdRegularIcon, LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
+
+type TPrevNextButtonProps = {
+    enabled: boolean;
+    isNext?: boolean;
+    onClick: () => void;
+};
+
+const CFDCompareAccountsCarouselButton = ({ enabled, isNext = false, onClick }: TPrevNextButtonProps) => (
+    <IconButton
+        className={qtMerge(
+            'bg-system-light-primary-background z-[1] absolute hidden lg:flex items-center justify-center top-1/2 cursor-pointer w-2000 h-2000 rounded-[50%] border-solid border-75 disbaled:opacity-400 disabled:hidden',
+            isNext && 'right-800',
+            !isNext && 'left-800'
+        )}
+        colortyle='text-primary'
+        componentType='icon-only'
+        disabled={!enabled}
+        icon={isNext ? LabelPairedChevronRightMdRegularIcon : LabelPairedChevronLeftMdRegularIcon}
+        isRound
+        onClick={onClick}
+        size='md'
+    />
+);
+export default CFDCompareAccountsCarouselButton;
diff --git a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/index.ts b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/index.ts
new file mode 100644
index 000000000000..1b0190cc15eb
--- /dev/null
+++ b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/index.ts
@@ -0,0 +1 @@
+export { default as CompareAccountsCarousel } from './CompareAccountsCarousel';