import React, { useState, useEffect } from 'react'
import styled, { keyframes } from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Flex, Image } from '@pancakeswap/uikit'

const ShopItem = styled.div`
  /* height: 358px; */
  border-radius: 20px;
  /* background: rgba(255, 255, 255, 0.39);
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15); */
  position: relative;
  overflow: hidden;

  & > .ribbon {
    width: 106px;
    height: 108px;
    overflow: hidden;
    position: absolute;
    top: -6px;
    left: -6px;
    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;

      ${({ theme }) => theme.mediaQueries.xs} {
        padding: 2px 0;
        left: -43px;
        top: 16px;
      }
      ${({ theme }) => theme.mediaQueries.lg} {
        padding: 8px 0;
        left: -33px;
        top: 26px;
      }
    }
    & > .epic {
      background: linear-gradient(180deg, #efea48 0%, #f32121 100%);
    }
    & > .legend {
      background: linear-gradient(180deg, #4b84f5 0%, #bc21f3 100%);
    }
    & > .uncommon {
      background: linear-gradient(180deg, #3dffec 0%, #24bf52 100%);
    }
    & > .common {
      background: linear-gradient(180deg, #b5e9f3 0%, #1195d9 100%);
    }
  }
`
const ItemText = styled(Flex)`
  padding: 10px 0;
  justify-content: center;
  font-size: 18px;
  color: #707070;
  text-align: center;
`
const ImageType = styled.img`
  border-radius: 20px;
`
const ProbabilityFlex = styled(Flex)`
  font-size: 26px;
  justify-content: center;
  color: #3cbbcc;
`
const ProbabilityTitle = styled(Flex)`
  font-size: 18px;
  color: #666666;
  margin-top: 5px;
  justify-content: center;
`

interface ShopListItemProps {
  item?: Detail
  grade?: string
}
interface Detail {
  goodsId?: string
  grade?: string
  id?: string
  name?: string
  proportion?: number | string
}

const ShopList: React.FC<ShopListItemProps> = ({ item, grade }) => {
  const { t } = useTranslation()

  return (
    <ShopItem key={item.id}>
      <div className="ribbon">
        {grade === 'EPIC' && <div className="ribbon1 epic">{t('epic')}</div>}
        {grade === 'LEGEND' && <div className="ribbon1 legend">{t('legend')}</div>}
        {grade === 'RARE' && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
        {grade === 'NORMAL' && <div className="ribbon1 common">{t('common')}</div>}
      </div>
      {/* <ImageType src="/images/nft/epic.svg" width={211} height={213} /> */}
      {grade === 'EPIC' && <ImageType src="/images/nft/epic.svg" width={211} height={213} />}
      {grade === 'LEGEND' && <ImageType src="/images/nft/legend.svg" width={211} height={213} />}
      {grade === 'RARE' && <ImageType src="/images/nft/uncommon.svg" width={211} height={213} />}
      {grade === 'NORMAL' && <ImageType src="/images/nft/common.svg" width={211} height={213} />}
      <ItemText>{item.name}</ItemText>
      <ProbabilityFlex>{item.proportion}%</ProbabilityFlex>
      <ProbabilityTitle>{t('The rate of')}</ProbabilityTitle>
    </ShopItem>
  )
}
export default ShopList