import React, { useState, useEffect } from 'react'
import styled, { keyframes } from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { formatTimeNumber } from 'utils/formatBalance'
import { Flex, Text, Image } from '@pancakeswap/uikit'
import useToast from 'hooks/useToast'
import { ListProps } from 'types/bazaar'
import { useAccount } from 'state/userInfo/hooks'
import useRefresh from 'hooks/useRefresh'
import { TOKEN_SYMBOL } from 'config/index'

import ShopList from './ShopList'

interface ContentShop {
  list?: ListProps[]
  getDetail?: (v) => void
}

const ShopMain = styled.div`
  width: 100%;
  display: grid;
  gap: 18px;
  grid-template-rows: 1fr;
  margin: 0px auto;
  grid-template-columns: repeat(4, 1fr);
  box-sizing: border-box;
  cursor: pointer;
  ${({ 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 ShopFlex = styled(Flex)`
  flex-direction: column;
  background: rgba(255, 255, 255, 0.39);
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
  opacity: 1;
  border-radius: 20px;
  position: relative;
`

const ShopName = styled(Text)`
  padding: 10px 0 14px 0;
  text-align: center;
  font-size: 18px;
  color: #666666;
  border-bottom: 1px solid #e3e3e3;
`
const ShopFooter = styled(Flex)`
  padding: 15px;
  justify-content: space-between;
`
const FooterLabel = styled(Text)`
  font-size: 14px;
  color: #999999;
`
const FooterValue = styled(Flex)`
  /* width: 40%; */
  font-size: 16px;
  color: #1fc7d4;
  flex-wrap: wrap;
`

const ContentShop: React.FC<ContentShop> = ({ list, getDetail }) => {
  const { t } = useTranslation()
  const account = useAccount()
  const { toastSuccess, toastError } = useToast()

  const showDetail = (id) => {
    getDetail(id)
  }

  return (
    <ShopMain>
      {list.map((item) => {
        return (
          <ShopFlex key={item.id} onClick={() => showDetail(item)}>
            <ShopList
              item={item}
              width={278}
              height={302}
              img={item.coverResource.url}
              grade={item.grade}
              borderRadius="20px 20px 0 0"
            />
            <ShopName>{item.name}</ShopName>
            <ShopFooter>
              <FooterLabel>{t('trading value')}</FooterLabel>
              <FooterValue>
                {item.priceList.map((childItem, index) => {
                  return (
                    <Flex alignItems="center" key={childItem.label}>
                      {/* <>{formatTimeNumber(childItem.value)}</> */}
                      <>{Number(childItem.value).toFixed(2)}</>
                      <Text color="text">{childItem.label}</Text>
                      {index === 0 && item.priceList.length === 2 && <Text margin="0 5px">-</Text>}
                    </Flex>
                  )
                })}
              </FooterValue>
            </ShopFooter>
          </ShopFlex>
        )
      })}
    </ShopMain>
  )
}
export default ContentShop