hiCity-nft/src/views/BlindBox/index.tsx

import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { useAccount } from 'state/userInfo/hooks'
import UnlockButton from 'components/UnlockButton'
import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Card, Text, Flex, Image, Button } from '@pancakeswap/uikit'
import { UnOpenModel } from 'components/Modal'
import { ListProp } from 'types/blindBox'
import Header from './component/Header'
import Operation from './component/Operation'
import { useGetList } from './hooks'

import 'swiper/swiper.min.css'
import 'swiper/components/pagination/pagination.min.css'

SwiperCore.use([Keyboard, Mousewheel, Pagination])

const MainFlex = styled(Flex)`
  width: 100%;
  min-height: calc(100vh - 64px);
  align-items: center;
  background: ${({ theme }) => theme.colors.gradients.bubblegum};
`

const SwiperDiv = styled(Swiper)`
  height: 730px;
  position: relative;
  & > .swiper-wrapper > .swiper-slide > div > div {
    background: transparent;
  }
  & > .swiper-container-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    /* position: absolute; */
    bottom: 130px;
  }
  & > .swiper-pagination {
    bottom: 130px !important;
    ${({ theme }) => theme.mediaQueries.xs} {
      bottom: 260px !important;
    }
    ${({ theme }) => theme.mediaQueries.lg} {
      bottom: 130px !important;
    }
    & > .swiper-pagination-bullet {
      background: #fff;
      width: 14px;
      height: 9px;
      opacity: 1;
      border-radius: 3px;
      z-index: 999;
    }
    & > .swiper-pagination-bullet-active {
      background: #000;
    }
  }
`

const BlindBoxFlex = styled(Flex)`
  flex-direction: column;
  align-items: center;
  justify-content: center;
`

const BlindBoxCard = styled.div`
  width: 500px;
  /* height: 590px; */
  background: #ffffff !important;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 1;
  border-radius: 20px;
  margin: 0 auto;
  position: relative;

  ${({ theme }) => theme.mediaQueries.xs} {
    width: 350px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    width: 500px;
  }

  & > .ribbon {
    width: 106px;
    height: 108px;
    overflow: hidden;
    position: absolute;
    top: -0px;
    left: 0px;
    z-index: 10;
    & > .ribbon1 {
      line-height: 14px;
      text-align: center;
      transform: rotate(-45deg);
      position: relative;
      padding: 8px 0;
      left: -33px;
      top: 26px;
      width: 150px;
      color: white;
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
      letter-spacing: 1px;
      font-size: 14px;
    }
    & > .limitQuantity {
      background: linear-gradient(180deg, #4ee1b4 0%, #2183f3 100%);
    }
    & > .limitTime {
      background: linear-gradient(180deg, #24bcf2 0%, #7e4ee1 100%);
    }
  }
`
const UnlockButtonDiv = styled(UnlockButton)`
  width: 500px;
  height: 45px;
  background: linear-gradient(180deg, #7be0fc 0%, #9961f0 100%);
  opacity: 1;
  border-radius: 23px;
  margin-top: 80px;
  ${({ theme }) => theme.mediaQueries.xs} {
    width: 350px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    width: 500px;
  }
`
const BuyButton = styled(Button)`
  width: 500px;
  height: 45px;
  background: linear-gradient(180deg, #7be0fc 0%, #9961f0 100%);
  opacity: 1;
  border-radius: 23px;
  margin-top: 80px;
  ${({ theme }) => theme.mediaQueries.xs} {
    width: 350px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    width: 500px;
  }
`

const BlindBox: React.FC = () => {
  const { t } = useTranslation()
  const account = useAccount()
  const [blindBoxList, setBlindBoxList] = useState<ListProp[]>()
  const [buyNum, setBuyNum] = useState(0)

  const getList = useGetList()

  const getData = async () => {
    const { content } = await getList(1, 10)
    const arr = []
    content.forEach((item) => {
      const obj = item
      obj.num = 0
      obj.priceList = []
      Object.keys(obj.price).forEach((childItem) => {
        obj.priceList.push({ label: childItem, value: obj.price[childItem] })
      })
      obj.price = undefined
      arr.push(obj)
    })
    setBlindBoxList(arr)
  }

  useEffect(() => {
    getData()
  }, [])

  const handleBuy = () => {
    console.log(buyNum)
  }

  return (
    <MainFlex>
      {/* <UnOpenModel /> */}
      <SwiperDiv
        loop
        pagination={{ clickable: true }}
        spaceBetween={16}
        freeModeMomentumRatio={0.25}
        freeModeMomentumVelocityRatio={0.5}
      >
        {blindBoxList?.map((item) => {
          return (
            <SwiperSlide key={item.id}>
              <BlindBoxFlex>
                <BlindBoxCard>
                  <div className="ribbon">
                    {item.type === 'QUANTITATIVE' ? (
                      <div className="ribbon1 limitQuantity">{t('limit the quantity of')}</div>
                    ) : (
                      <div className="ribbon1 limitTime">{t('time limit')}</div>
                    )}
                  </div>
                  <Header detail={item} />
                  <Image src={item.coverResource.url} width={500} height={460} marginTop="-40px" />
                  <Operation detail={item} getNum={(v) => setBuyNum(v)} />
                </BlindBoxCard>
                {account ? <BuyButton onClick={handleBuy}>{t('Buy It Now')}</BuyButton> : <UnlockButtonDiv />}
              </BlindBoxFlex>
            </SwiperSlide>
          )
        })}
      </SwiperDiv>
    </MainFlex>
  )
}
export default BlindBox