import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { useDispatch } from 'react-redux'
import { uccnDetail, indexInfo } from 'services/user'
import { Flex, Heading, Text, Box, Button, Image, Link } from '@pancakeswap/uikit'
import { useTranslation } from 'contexts/Localization'
import { usePriceHccUsdt } from 'state/hooks'
import { OutLink } from 'types/user'

import FlexItemCom from './FlexItemCom'

const FirstPage = styled.div`
  background-image: url('/images/home/bg.svg');
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0.9rem 0 0.8rem 0;
`

const StyledPage = styled(Box)`
  padding-top: 16px;
  padding-bottom: 16px;

  ${({ theme }) => theme.mediaQueries.sm} {
    padding-top: 24px;
    padding-bottom: 24px;
    width: 80%;
  }

  ${({ theme }) => theme.mediaQueries.lg} {
    padding-top: 32px;
    padding-bottom: 32px;
    width: 80%;
  }
`
const FlexDiv = styled(Flex)`
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  ${({ theme }) => theme.mediaQueries.xs} {
    justify-content: center;
  }

  ${({ theme }) => theme.mediaQueries.lg} {
  }
`
const ImageDiv = styled.img`
  ${({ theme }) => theme.mediaQueries.xs} {
    justify-content: center;
    width: 215px;
    height: 215px;
    margin-bottom: 20px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    width: 315px;
    height: 315px;
    margin-bottom: 0px;
  }
`
const BtnFlex = styled(Flex)`
  align-items: center;
  flex-wrap: wrap;
  margin-top: 60px;
  ${({ theme }) => theme.mediaQueries.xs} {
    margin-top: 30px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    margin-top: 60px;
  }
`
const RadiusBtn = styled(Button)`
  border-radius: 50px;
  width: 170px;
  height: 60px;
  font-size: 18px;
  margin-right: 20px;
  margin-bottom: 10px;
  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
  ${({ theme }) => theme.mediaQueries.xs} {
    width: 140px;
    height: 50px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    width: 170px;
    height: 60px;
  }
`
const WhiteBtn = styled(Button)`
  border-radius: 50px;
  width: 140px;
  height: 30px;
  border: 1px solid #1fc7d4;
  margin: 0px 35px 10px 0;
  ${({ theme }) => theme.mediaQueries.xs} {
    width: 140px;
    height: 50px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    width: 170px;
    height: 60px;
  }
`
const BtnImage = styled(Image)`
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-right: 12px;
  cursor: pointer;
  & > img {
    border-radius: 50%;
  }
`

const ScoreDiv = styled(Flex)`
  margin-top: 127px;
  background: #fff;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
  opacity: 1;
  border-radius: 15px;
  padding: 59px 0;
  justify-content: space-between;
  ${({ theme }) => theme.mediaQueries.xs} {
    margin-top: 50px;
    padding: 30px 0;
    flex-direction: column;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    margin-top: 127px;
    padding: 59px 0;
    flex-direction: unset;
  }
`
const InfoDiv = styled.div``
const FristCom: React.FC = () => {
  const { t } = useTranslation()
  const dispatch = useDispatch()
  const [detail, setDetail] = useState({
    externalLinkList: [],
    userCount: '',
    volume: '',
    market: 0,
  })
  const hccPriceUsdt = usePriceHccUsdt()
  const [linkList, setLinkList] = useState([])

  const getDetail = async () => {
    const data = await indexInfo()
    const list = data.externalLinkList.map((item, index) => {
      const links = Object.keys(item.linkMap).map((key) => {
        return { name: key, link: item.linkMap[key], icon: item.iconResource.url }
      })
      return { icon: item.iconResource.url, name: item.name, list: links, key: index + item.name }
    })
    setLinkList(list)
    setDetail(data)
  }
  useEffect(() => {
    getDetail()
  }, [])
  const openLink = (link) => {
    window.open(link)
  }
  return (
    <>
      <FirstPage>
        <StyledPage px={['16px', '24px']} mx="auto">
          <FlexDiv>
            <ImageDiv src="/images/home/logo.svg" alt="" width={315} height={315} />
            <InfoDiv>
              <Heading as="h1" scale="xl" mb="24px" color="secondary">
                High City Coin
              </Heading>
              <Text>{t('Hcc Info')}</Text>
              <Text> {t('Hcc Nft')}</Text>
              <Text>{t('Hcc BTC')}</Text>
              <BtnFlex>
                <RadiusBtn variant="primary" onClick={() => openLink('https://pancake.kiemtienonline360.com/#/swap')}>
                  {t('Exchange')}
                </RadiusBtn>
                <Flex>
                  {linkList?.map((item, index) => {
                    return index < 6 ? (
                      <BtnImage
                        key={item.key}
                        style={{ borderRadius: '50%' }}
                        src={item.icon}
                        title={item.name}
                        alt={item.name}
                        width={34}
                        height={34}
                        onClick={() => openLink(item.list[0].link)}
                      />
                    ) : (
                      ''
                    )
                  })}
                </Flex>
              </BtnFlex>
            </InfoDiv>
          </FlexDiv>
          <ScoreDiv>
            <FlexItemCom name={t('Number of holders')} valueNum={detail?.userCount} />
            <FlexItemCom name={t('Your volume')} valueNum={detail?.volume} />
            <FlexItemCom name={t('market value')} valueNum={detail?.market * hccPriceUsdt || 0} />
            {/* {burned.map((item) => {
              return <FlexItemCom key={item.id} name={item.name} value={item.value} />
            })} */}
          </ScoreDiv>
        </StyledPage>
      </FirstPage>
    </>
  )
}

export default FristCom