'use client'
import Image from 'next/image'
import Link from 'next/link'
import { FC, useMemo } from 'react'

import { IBanner } from '@/types/landing.types'
import { useGetLanding } from '@/app/home/hooks/useHomeData'

const Banners4: FC = () => {
    const { data } = useGetLanding()

    const { desktopBanners, mobileBanners } = useMemo(() => {
        const allBanners = data?.results?.banners ?? []

        const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) =>
            allBanners.filter((banner) => banner.displayLocation === displayLocation)

        return {
            desktopBanners: groupByDisplayLocation('desktop'),
            mobileBanners: groupByDisplayLocation('mobile'),
        }
    }, [data?.results?.banners])

    const renderLayout = (banners: IBanner[]) => {
        const firstBanner = banners.find((banner) => banner.order === 4)
        const secondBanner = banners.find((banner) => banner.order === 5)
        const thirdBanner = banners.find((banner) => banner.order === 6)
        const fourthBanner = banners.find((banner) => banner.order === 7)

        if (
            !firstBanner?.imageUrl ||
            !secondBanner?.imageUrl ||
            !thirdBanner?.imageUrl ||
            !fourthBanner?.imageUrl
        ) {
            return null
        }

        return (
            <div className='flex lg:flex-row flex-col gap-6'>
                <div className='flex-1 rounded-[10px]'>
                    <Link href={firstBanner.linkUrl || '#'} className='block'>
                        <Image
                            src={firstBanner.imageUrl}
                            height={340}
                            width={1000}
                            className='w-full h-auto rounded-lg'
                            alt={firstBanner.altText}
                        />
                    </Link>
                </div>

                <div className='lg:w-[12%] w-full flex flex-col gap-6'>
                    <div className='w-full rounded-[10px]'>
                        <Link href={secondBanner.linkUrl || '#'} className='block'>
                            <Image
                                src={secondBanner.imageUrl}
                                height={158}
                                width={158}
                                className='w-full h-auto rounded-lg'
                                alt={secondBanner.altText}
                            />
                        </Link>
                    </div>
                    <div className='w-full rounded-[10px]'>
                        <Link href={thirdBanner.linkUrl || '#'} className='block'>
                            <Image
                                src={thirdBanner.imageUrl}
                                height={158}
                                width={158}
                                className='w-full h-auto rounded-lg'
                                alt={thirdBanner.altText}
                            />
                        </Link>
                    </div>
                </div>

                <div className='lg:w-[30%] w-full rounded-lg'>
                    <Link href={fourthBanner.linkUrl || '#'} className='block'>
                        <Image
                            src={fourthBanner.imageUrl}
                            height={400}
                            width={400}
                            className='w-full h-auto rounded-lg'
                            alt={fourthBanner.altText}
                        />
                    </Link>
                </div>
            </div>
        )
    }

    return (
        <>
            {desktopBanners.length > 0 && (
                <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
            )}
            {mobileBanners.length > 0 && (
                <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
            )}
        </>
    )
}

export default Banners4