'use client'
import { Button } from '@nextui-org/button';
import { Image, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalProps, useDisclosure } from '@nextui-org/react';
import { ChevronLeftWhite, ChevronRightWhite } from '../icons';
import React, { useEffect, useState } from 'react';
import Link from 'next/link';

export default function RegionalNews() {
    const [limitedData, setLimitedData] = useState<any>([]);
    const { isOpen, onOpen, onOpenChange } = useDisclosure();
    const [scrollBehavior, setScrollBehavior] = React.useState<ModalProps["scrollBehavior"]>("outside");
    const [modalPlacement, setModalPlacement] = React.useState<any>("auto");

    const listPolda = [
        {
            id: 1,
            img: "/temp/poldametro.svg",
            title: "Polda Metro Jaya",
            path: '/news/polda-metro-jaya'
        },
        {
            id: 2,
            img: "/temp/polda-sumut.svg",
            title: "Polda Sumatra Utara",
            path: '/news/polda-sumatra-utara'
        },
        {
            id: 3,
            img: "/temp/polda-banten.svg",
            title: "Polda Banten",
            path: '/news/polda-banten'
        },
        {
            id: 4,
            img: "/temp/polda-jateng.svg",
            title: "Polda Jawa Tengah",
            path: '/news/polda-jateng'
        },
        {
            id: 5,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
    ];

    const listPoldaAll = [
        {
            id: 1,
            img: "/temp/poldametro.svg",
            title: "Polda Metro Jaya",
            path: '/news/polda-metro-jaya'
        },
        {
            id: 2,
            img: "/temp/polda-sumut.svg",
            title: "Polda Sumatra Utara",
            path: '/news/polda-sumatra-utara'
        },
        {
            id: 3,
            img: "/temp/polda-banten.svg",
            title: "Polda Banten",
            path: '/news/polda-banten'
        },
        {
            id: 4,
            img: "/temp/polda-jateng.svg",
            title: "Polda Jawa Tengah",
            path: '/news/polda-jateng'
        },
        {
            id: 5,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 6,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 7,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 8,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 9,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 10,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 11,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 12,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 13,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 14,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 15,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 16,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 17,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 18,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 19,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 20,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 21,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 22,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 23,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 24,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 25,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 26,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 27,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 28,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 29,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 30,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 31,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 32,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 33,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
        {
            id: 34,
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'news/polda-jatim'
        },
    ];

    // useEffect(() => {
    //     function updateLimitedData() {
    //         if (window.matchMedia("(max-width: 767px)").matches) {
    //             setLimitedData(list.slice(0, 2));
    //         } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
    //             setLimitedData(list.slice(0, 3));
    //         } else {
    //             setLimitedData(list.slice(0, 5));
    //         }
    //     }

    //     updateLimitedData();
    //     window.addEventListener('resize', updateLimitedData);
    //     return () => {
    //         window.removeEventListener('resize', updateLimitedData);
    //     };
    // }, [list]);

    return (
        <div className='text-center border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4  flex flex-col justify-around'>
            <div className='font-bold text-2xl underline underline-offset-4 decoration-red-600 text-[#DD8306]'>Berita Wilayah</div>
            <div className='flex items-center justify-around'>
                <div><ChevronLeftWhite color='orange' /></div>
                <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
                    {listPolda.map((item: any, index: any) => (
                        <Link href={item.path}>
                            <div key={item.id} className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
                                <Image
                                    radius="lg"
                                    className="h-[59px]"
                                    src={item.img}
                                />
                                <p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
                            </div>
                        </Link>
                    ))}
                </div>
                <div><ChevronRightWhite color='orange' /></div>
            </div>
            <div>
                <Button
                    onPress={onOpen}
                    className='bg-[#DD8306] text-white font-bold'
                    size='sm'
                >
                    Lihat Lebih Banyak
                </Button>
                <Modal isOpen={isOpen} onOpenChange={onOpenChange}
                    size='full'
                    scrollBehavior={scrollBehavior}
                    placement={modalPlacement}
                    classNames={{
                        wrapper: "h-full bg-white",
                        base: "bg-white min-h-full",
                        // body: "w-full bg-white",
                        // footer: "bg-white"
                    }}
                >
                    <ModalContent>
                        {(onClose) => (
                            <>
                                <ModalHeader className="flex flex-col text-[#DD8306] items-center min-h mb- text-3xl font-semibold">Berita Wilayah</ModalHeader>
                                <ModalBody className='flex flex-row flex-wrap justify-center'>
                                    {listPoldaAll.map((item: any, index: any) => (
                                        <Link href={item.path}>
                                            <div key={index.id} className='w-[140px] h-[115px] flex flex-col items-center justify-evenly border-2 rounded-lg shadow-sm'>
                                                <Image
                                                    radius="lg"
                                                    className="h-[59px]"
                                                    src={item.img}
                                                />
                                                <p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
                                            </div>
                                        </Link>
                                    ))}
                                </ModalBody>
                                <ModalFooter>
                                    <Button color="danger" variant="light" onPress={onClose}>
                                        Tutup
                                    </Button>
                                </ModalFooter>
                            </>
                        )}
                    </ModalContent>
                </Modal>
            </div>
        </div>
    )
}