'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"]>("inside");
    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: "/assets/polda/polda-metro-jaya.svg",
            title: "Polda Metro Jaya",
            path: '/news/polda-metro-jaya'
        },
        {
            id: 2,
            img: "/assets/polda/polda-jawa-barat.svg",
            title: "Polda Jawa Barat",
            path: '/news/polda-jawa-barat'
        },
        {
            id: 3,
            img: "/assets/polda/polda-banten.svg",
            title: "Polda Banten",
            path: '/news/polda-banten'
        },
        {
            id: 4,
            img: "/assets/polda/polda-jateng.svg",
            title: "Polda Jawa Tengah",
            path: '/news/polda-jateng'
        },
        {
            id: 5,
            img: "/assets/polda/polda-diy.svg",
            title: "Polda D.I Yogyakarta",
            path: '/news/polda-daerah-istimewa-yogyakarta'
        },
        {
            id: 6,
            img: "/assets/polda/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: '/news/polda-jawa-timur'
        },
        {
            id: 7,
            img: "/assets/polda/polda-aceh.svg",
            title: "Polda Aceh",
            path: '/news/polda-aceh'
        },
        {
            id: 8,
            img: "/assets/polda/polda-sumut.svg",
            title: "Polda Sumatra Utara",
            path: '/news/polda-sumatra-utara'
        },
        {
            id: 9,
            img: "/assets/polda/polda-sumbar.svg",
            title: "Polda Sumatra Barat",
            path: '/news/polda-sumatra-barat'
        },
        {
            id: 10,
            img: "/assets/polda/polda-riau.svg",
            title: "Polda Riau",
            path: '/news/polda-riau'
        },
        {
            id: 11,
            img: "/assets/polda/polda-kepri.svg",
            title: "Polda Kep.Riau",
            path: '/news/polda-kepulauan-riau'
        },
        {
            id: 12,
            img: "/assets/polda/polda-jambi.svg",
            title: "Polda Jambi",
            path: '/news/polda-jambi'
        },
        {
            id: 13,
            img: "/assets/polda/polda-jambi.svg",
            title: "Polda Jambi",
            path: '/news/polda-jambi'
        },
        {
            id: 14,
            img: "/assets/polda/polda-sumsel.svg",
            title: "Polda Sumatra Selatan",
            path: '/news/polda-sumatra-selatan'
        },
        {
            id: 15,
            img: "/assets/polda/polda-sumsel.svg",
            title: "Polda Kep.Bangka Belitung",
            path: '/news/polda-bangka-belitung'
        },
        {
            id: 16,
            img: "/assets/polda/polda-bengkulu.svg",
            title: "Polda Bengkulu",
            path: '/news/polda-bengkulu'
        },
        {
            id: 17,
            img: "/assets/polda/polda-lampung.svg",
            title: "Polda Lampung",
            path: '/news/polda-lampung'
        },
        {
            id: 18,
            img: "/assets/polda/polda-ntb.svg",
            title: "Polda Nusa Tenggara Barat",
            path: '/news/polda-ntb'
        },
        {
            id: 19,
            img: "/assets/polda/polda-ntb.svg",
            title: "Polda Nusa Tenggara Barat",
            path: '/news/polda-ntb'
        },
        {
            id: 20,
            img: "/assets/polda/polda-ntt.svg",
            title: "Polda Nusa Tenggara Timur",
            path: '/news/polda-ntt'
        },
        {
            id: 21,
            img: "/assets/polda/polda-bali.svg",
            title: "Polda Bali",
            path: '/news/polda-bali'
        },
        {
            id: 22,
            img: "/assets/polda/polda-kalbar.svg",
            title: "Polda Kalimantan Barat",
            path: '/news/polda-kalimantan-barat'
        },
        {
            id: 23,
            img: "/assets/polda/polda-kalteng.svg",
            title: "Polda Kalimantan Tengah",
            path: '/news/polda-kalimantan-tengah'
        },
        {
            id: 24,
            img: "/assets/polda/polda-kalsel.svg",
            title: "Polda Kalimantan Selatan",
            path: '/news/polda-kalimantan-selatan'
        },
        {
            id: 25,
            img: "/assets/polda/polda-kaltim.svg",
            title: "Polda Kalimantan Timur",
            path: '/news/polda-kalimantan-timur'
        },
        {
            id: 26,
            img: "/assets/polda/polda-kalut.svg",
            title: "Polda Kalimantan Utara",
            path: '/news/polda-kalimantan-utara'
        },
        {
            id: 27,
            img: "/assets/polda/polda-sulteng.svg",
            title: "Polda Sulawesi Tengah",
            path: '/news/polda-sulawesi-tengah'
        },
        {
            id: 28,
            img: "/assets/polda/polda-sulawesi-utara.svg",
            title: "Polda Sulawesi Utara",
            path: '/news/polda-sulawesi-utara'
        },
        {
            id: 29,
            img: "/assets/polda/polda-gorontalo.svg",
            title: "Polda Gorontalo",
            path: '/news/polda-gorontalo'
        },
        {
            id: 30,
            img: "/assets/polda/polda-sulbar.svg",
            title: "Polda Sulawesi Barat",
            path: '/news/polda-sulawesi-barat'
        },
        {
            id: 31,
            img: "/assets/polda/polda-sulsel.svg",
            title: "Polda Sulawesi Selatan",
            path: '/news/polda-sulawesi-selatan'
        },
        {
            id: 32,
            img: "/assets/polda/polda-sultenggara.svg",
            title: "Polda Sulawesi Tenggara",
            path: '/news/polda-sulawesi-tenggara'
        },
        {
            id: 33,
            img: "/assets/polda/polda-malut.svg",
            title: "Polda Maluku Utara",
            path: '/news/polda-maluku-utara'
        },
        {
            id: 34,
            img: "/assets/polda/polda-maluku.svg",
            title: "Polda Maluku",
            path: '/news/polda-maluku'
        },
        {
            id: 35,
            img: "/assets/polda/polda-papuabarat.svg",
            title: "Polda Papua Barat",
            path: '/news/polda-papua-barat'
        },
        {
            id: 36,
            img: "/assets/polda/polda-papua.svg",
            title: "Polda Papua",
            path: '/news/polda-papua'
        },

    ];

    // 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: "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 text-center'>
                                    {listPoldaAll.map((item: any, index: any) => (
                                        <div key={index.id} className='w-[140px] h-[115px] flex flex-col items-center justify-center border-2 rounded-lg shadow-sm'>
                                            <Link href={item.path}>
                                                <div className='flex flex-col items-center '>
                                                    <Image
                                                        radius="lg"
                                                        className="h-[59px]"
                                                        src={item.img}
                                                    />
                                                    <p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
                                                </div>
                                            </Link>
                                        </div>
                                    ))}
                                </ModalBody>
                                <ModalFooter>
                                    <Button color="danger" variant="light" onPress={onClose}>
                                        Tutup
                                    </Button>
                                </ModalFooter>
                            </>
                        )}
                    </ModalContent>
                </Modal>
            </div>
        </div>
    )
}