import React, { useState, useMemo, useEffect } from 'react'
import styled from 'styled-components'
import { formatDivNumber } from 'utils/formatBalance'
import { useTranslation } from 'contexts/Localization'
import { useReferralNormalConfigInfo, useReferralCommanderConfigInfo } from 'state/referral/hooks'
import { Flex, Button, Modal, Image, Text } from '@pancakeswap/uikit'
import { getContract } from 'services/referral'
import BuyActions from './BuyActions'
import TextFlex from './TextFlex'
import FlexCom from './FlexCom'

const ModalDiv = styled(Modal)`
  width: 50%;

  ${({ theme }) => theme.mediaQueries.xs} {
  }
`

const InfoDiv = styled.div`
  box-sizing: border-box;
  padding: 30px 26px;
  margin-left: 60px;
  box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
  ${({ theme }) => theme.mediaQueries.xs} {
    padding: 20px 10px;
    margin-left: 0;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    padding: 30px 26px;
    margin-left: 60px;
  }
`

const ImageDiv = styled(Image)`
  width: 300px;
  height: 300px;
  margin-bottom: 20px;
  ${({ theme }) => theme.mediaQueries.xs} {
    width: 150px;
    height: 150px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    width: 300px;
    height: 300px;
  }
`
const TextDiv = styled(Text)`
  text-align: center;
  height: 45px;
  opacity: 0.5;
  border-radius: 23px;
  font-size: 26px;
  color: #280d5f;
  display: flex;
  align-items: center;
  justify-content: center;
`

interface BuyNftModalProps {
  onDismiss?: () => void
}
const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
  const { t } = useTranslation()
  const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
  const referralRewardInfo = useReferralNormalConfigInfo()
  const [price, setPrice] = useState('')
  const [link, setLink] = useState('')

  const getLinkAddress = async () => {
    const data = await getContract()
    setLink(data)
  }
  useEffect(() => {
    getLinkAddress()
  }, [])
  useMemo(() => {
    const priceList = []
    referralCommanderConfigInfo?.properties?.price &&
      Object.keys(referralCommanderConfigInfo?.properties?.price).forEach((item) => {
        priceList.push(`${item}:${referralCommanderConfigInfo?.properties?.price[item]}`)
      })
    setPrice(priceList.join(' - '))
  }, [referralCommanderConfigInfo])

  return (
    <ModalDiv title={`${t('purchase')}${referralRewardInfo.properties?.name as string}`} onDismiss={onDismiss}>
      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
        <Flex flexDirection="column" justifyContent="center">
          <ImageDiv
            src={referralCommanderConfigInfo.properties?.cover as string}
            width={250}
            height={250}
            marginBottom="20px"
          />
          <TextDiv textAlign="center">{price}</TextDiv>
        </Flex>
        {/* <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" /> */}
        <InfoDiv>
          <TextFlex
            text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
            color="#FEFDF1"
          />
          <TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
          <TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
          <FlexCom
            name={t('First stage sharing ratio')}
            value={`${referralCommanderConfigInfo.dividendFirst as number}%`}
          />
          <FlexCom
            name={t('Secondary split ratio')}
            value={`${referralCommanderConfigInfo.dividendSecond as number}%`}
          />
          <FlexCom
            name={t('Contract address')}
            typeLink={`https://bscscan.com/token/${link}`}
            value={`${link && link.substring(0, 6)}...${link && link.substring(link.length - 4, link.length)}`}
          />
          <FlexCom name={t('Assets agreement')} value="ERC721" />
          <FlexCom name={t('Assets and chain')} value="BSC" />
        </InfoDiv>
      </Flex>
      <BuyActions />
      {/* <Flex>
        <UpBtn>{t('Buy It Now')}</UpBtn>
      </Flex> */}
    </ModalDiv>
  )
}
export default BuyNftModal