hiCity-nft/src/views/BlindBox/component/SeriesDetail.tsx

import React, { useEffect } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Modal, Flex, Text, Image } from '@pancakeswap/uikit'
import { useGetBoxDetail } from '../hooks'
import ShopList from './ShopList'

interface SeriesDetailProp {
  name?: string | number
  value?: string | number
  onDismiss?: () => void
  detail: DetailProp
}

interface DetailProp {
  beginTime?: string
  coverResource: coverResourceProps
  endTime?: string
  id?: string
  name?: string
  priceList?: priceProps[]
  price?: any
  purchased?: string | number
  total?: string | number
  type?: string
}

interface coverResourceProps {
  path?: string
  url?: string
}
interface priceProps {
  label?: string
  value?: string | number
}

const Main = styled(Modal)`
  width: 60%;
  background-color: #fff;
  padding: 30px 0;
  border-radius: 30px;
  height: 90%;
  z-index: 10;
`
const FlexBetween = styled(Flex)`
  justify-content: space-between;
  align-items: center;
`
const TypeText = styled(Text)`
  font-size: 28px;
  color: #333333;
`
const TypeNum = styled(Text)`
  font-size: 26px;
  color: #1fc7d4;
`
const ProbabilityFlex = styled(Flex)`
  width: 220px;
  height: 44px;
  border: 1px solid #d5d5d5;
  opacity: 1;
  border-radius: 5px;
  font-size: 22px;
  color: #666666;
  align-items: center;
  justify-content: center;
`
const TextNum = styled(Text)`
  font-size: 22px;
  color: #280d5f;
`
const Detail = styled.div`
  /* border: 1px solid red; */
  height: calc(100vh - 320px);
  overflow: auto;
  padding-top: 30px;
  /* border-left: 1px solid #d5d5d5; */
`
const ShopText = styled(Text)`
  font-size: 26px;
  color: #3cbbcc;
  margin-bottom: 15px;
  padding-top: 20px;
`

const Shop = styled.div`
  width: 100%;
  display: grid;
  gap: 18px;
  grid-template-rows: 1fr;
  margin: 0px auto;
  grid-template-columns: repeat(4, 1fr);

  ${({ theme }) => theme.mediaQueries.xs} {
    grid-template-columns: repeat(2, 1fr);
  }
  ${({ theme }) => theme.mediaQueries.md} {
    grid-template-columns: repeat(3, 1fr);
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    grid-template-columns: repeat(4, 1fr);
  }
`
const ShopMain = styled.div`
  border-bottom: 1px solid #d5d5d5;
  border-left: 1px solid #d5d5d5;
  padding: 0 20px 15px 20px;
`

const SeriesDetail: React.FC<SeriesDetailProp> = ({ name, value, onDismiss, detail }) => {
  const { t } = useTranslation()
  const list = [
    {
      label: t('epic'),
      type: '1',
      list: [
        { label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 1 },
        { label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 2 },
        { label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 3 },
        { label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 4 },
        { label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 5 },
      ],
    },
    { label: t('legend'), type: '2', list: [{ label: 'Cat goddess Emerald ', id: 2, type: 2, probability: 6 }] },
    { label: t('uncommon'), type: '3', list: [{ label: 'Cat goddess Emerald ', id: 3, type: 3, probability: 7 }] },
    { label: t('common'), type: '4', list: [{ label: 'Cat goddess Emerald ', id: 4, type: 4, probability: 8 }] },
  ]

  const getDetail = useGetBoxDetail()
  const getData = async () => {
    const data = await getDetail(detail.id)
    console.log(data)
  }

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

  return (
    <Main title="法式盛宴" onDismiss={onDismiss}>
      <FlexBetween>
        <TypeText>{t('limit the quantity of')}</TypeText>
        <TypeNum>10000</TypeNum>
      </FlexBetween>
      <Detail>
        <FlexBetween style={{ paddingRight: '20px' }}>
          <ProbabilityFlex>{t('nft Smoking in the probability')}</ProbabilityFlex>
          <TextNum>{t('%num%kind nft', { num: 100 })}</TextNum>
        </FlexBetween>
        <div>
          {list.map((item) => {
            return (
              <ShopMain>
                <ShopText>{item.label}</ShopText>
                <Shop>
                  {item.list.map((childItem) => {
                    return <ShopList item={childItem} />
                  })}
                </Shop>
              </ShopMain>
            )
          })}
        </div>
      </Detail>
    </Main>
  )
}
export default SeriesDetail