import { Box, Flex } from '@chakra-ui/react'
import React, { ReactElement } from 'react'
// import Slider from 'react-slick'
import { AnimatePresence, motion } from 'framer-motion'
import { usePagination } from '../../../hooks/usePagination'
import EmptyText from '../EmptyText'
import Pagination from '../Pagination'
import NftPlaceholder from './NftPlaceholder'

// const settings = {
//   dots: false,
//   infinite: true,
//   speed: 500,
//   slidesToShow: 4,
//   slidesToScroll: 1,
//   responsive: [
//     {
//       breakpoint: breakpoints.md,
//       settings: {
//         slidesToShow: 1,
//         slidesToScroll: 1,
//         dots: false,
//       },
//     },
//   ],
// }

interface INftListProps {
  data: Array<any>
  CardItem: any
  getCardItemProps: (item) => any
  isLoaded?: boolean
  total?: number
  isShowPagination?: boolean
  EmptyElement?: ReactElement
}

const NftList: React.FunctionComponent<INftListProps> = (props) => {
  const {
    data,
    CardItem,
    getCardItemProps,
    isLoaded = false,
    total = 1,
    isShowPagination = true,
    EmptyElement = <EmptyText fontSize={'16px'} color={'gray.400'} />,
  } = props
  const { pagination, onPageChange } = usePagination()

  if (isLoaded === false) {
    return (
      <Flex flexWrap={'wrap'} justifyContent={'center'} style={{ gap: '32px' }}>
        {[...Array(8)].map((_, key) => (
          <NftPlaceholder key={key} />
        ))}
      </Flex>
    )
  }
  if (data.length === 0) {
    return EmptyElement
  }
  return (
    <motion.div animate={{ opacity: 1 }} initial={{ opacity: 0 }} layout exit={{ opacity: 0 }}>
      <AnimatePresence>
        <Box>
          <Flex flexWrap={'wrap'} justifyContent={'center'} style={{ gap: '32px' }}>
            {data.map((item, key) => (
              <motion.div key={key} animate={{ opacity: 1 }} initial={{ opacity: 0 }} layout exit={{ opacity: 0 }}>
                <CardItem data={item} {...getCardItemProps(item)} />
              </motion.div>
            ))}
          </Flex>
          {isShowPagination && (
            <Pagination
              onPageChange={onPageChange}
              onLimitPerPageChange={onPageChange}
              total={total}
              pagination={pagination}
            />
          )}
        </Box>
      </AnimatePresence>
    </motion.div>
  )
}

export default NftList